From bb6ba35871599ce2894c4e68dcc1563cb34574ae Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 03:56:32 +0700 Subject: [PATCH 01/27] Pass store name in wcpaySettings because it will be needed as part of the email subject used in email link for the disputed transaction customer. --- client/globals.d.ts | 1 + includes/admin/class-wc-payments-admin.php | 1 + 2 files changed, 2 insertions(+) diff --git a/client/globals.d.ts b/client/globals.d.ts index 293db5f0e0d..8a972874945 100644 --- a/client/globals.d.ts +++ b/client/globals.d.ts @@ -113,6 +113,7 @@ declare global { isWooPayStoreCountryAvailable: boolean; isSubscriptionsPluginActive: boolean; isStripeBillingEligible: boolean; + storeName: string; }; const wcTracks: any; diff --git a/includes/admin/class-wc-payments-admin.php b/includes/admin/class-wc-payments-admin.php index c6695067a9e..450cca09f2e 100644 --- a/includes/admin/class-wc-payments-admin.php +++ b/includes/admin/class-wc-payments-admin.php @@ -846,6 +846,7 @@ private function get_js_settings(): array { 'isWooPayStoreCountryAvailable' => WooPay_Utilities::is_store_country_available(), 'isStripeBillingEnabled' => WC_Payments_Features::is_stripe_billing_enabled(), 'isStripeBillingEligible' => WC_Payments_Features::is_stripe_billing_eligible(), + 'storeName' => get_bloginfo( 'name' ), ]; return apply_filters( 'wcpay_js_settings', $this->wcpay_js_settings ); From 3088de536c22267782b4c4e9577d124ee720554f Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 03:57:28 +0700 Subject: [PATCH 02/27] Steps to resolve section in the dispute details section on transaction details page. --- .../dispute-details/dispute-steps.tsx | 106 ++++++++++++++++++ .../payment-details/dispute-details/index.tsx | 15 ++- .../dispute-details/style.scss | 9 ++ .../dispute-details/test/index.test.tsx | 16 ++- client/payment-details/summary/index.tsx | 6 +- 5 files changed, 148 insertions(+), 4 deletions(-) create mode 100644 client/payment-details/dispute-details/dispute-steps.tsx diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx new file mode 100644 index 00000000000..92eb39baff8 --- /dev/null +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -0,0 +1,106 @@ +/** @format **/ + +/** + * External dependencies + */ +import React from 'react'; +import { __ } from '@wordpress/i18n'; +import { createInterpolateElement } from '@wordpress/element'; +import { dateI18n } from '@wordpress/date'; +import moment from 'moment'; + +/** + * Internal dependencies + */ +import type { Dispute } from 'wcpay/types/disputes'; +import { ChargeBillingDetails } from 'wcpay/types/charges'; +import { formatExplicitCurrency } from 'utils/currency'; + +interface Props { + dispute: Dispute; + customer: ChargeBillingDetails | null; + chargeCreated: number; +} + +const DisputeSteps: React.FC< Props > = ( { + dispute, + customer, + chargeCreated, +} ) => { + let emailLink; + if ( customer?.email ) { + const chargeDate = dateI18n( + 'Y-m-d', + moment( chargeCreated * 1000 ).toISOString() + ); + const disputeDate = dateI18n( + 'Y-m-d', + moment( dispute.created * 1000 ).toISOString() + ); + const emailSubject = `Problem with your purchase from ${ wcpaySettings.storeName } on ${ chargeDate }?`; + const emailBody = + `Hello ${ customer?.name }\n\n` + + `We noticed that on ${ disputeDate }, you disputed a ${ formatExplicitCurrency( + dispute.amount, + dispute.currency + ) } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + + `Alternatively, if the dispute was a mistake, you could easily withdraw it by calling the number on the back of your card. Thank you so much - we appreciate your business and look forward to working with you.`; + + emailLink = `mailto:${ customer.email }?subject=${ encodeURIComponent( + emailSubject + ) }&body=${ encodeURIComponent( emailBody ) }`; + } + + return ( +
+
+ { __( 'Steps to resolve:', 'woocommercts' ) } +
+
    +
  1. + { __( + "Review the claim issued by the cardholder's bank.", + 'woocommerce-payments' + ) } +
    2. +
  2. + { customer?.email + ? createInterpolateElement( + __( + 'Email the customer to address their concerns.', + 'woocommerce-payments' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) + : __( + 'Email the customer to address their concerns.', + 'woocommerce-payments' + ) } +
    3. +
  3. + { __( + 'Provide guidance on dispute withdrawal if the customer agrees.', + 'woocommerce-payments' + ) } +
    4. +
  4. + { __( + 'Challenge or accept the dispute by', + 'woocommerce-payments' + ) } +
    5. +
+
+ ); +}; + +export default DisputeSteps; diff --git a/client/payment-details/dispute-details/index.tsx b/client/payment-details/dispute-details/index.tsx index 4896b3e1e63..8157810be61 100644 --- a/client/payment-details/dispute-details/index.tsx +++ b/client/payment-details/dispute-details/index.tsx @@ -16,14 +16,22 @@ import type { Dispute } from 'wcpay/types/disputes'; import { isAwaitingResponse } from 'wcpay/disputes/utils'; import DisputeNotice from './dispute-notice'; import DisputeSummaryRow from './dispute-summary-row'; +import DisputeSteps from './dispute-steps'; import InlineNotice from 'components/inline-notice'; import './style.scss'; +import { ChargeBillingDetails } from 'wcpay/types/charges'; interface DisputeDetailsProps { dispute: Dispute; + customer: ChargeBillingDetails | null; + chargeCreated: number; } -const DisputeDetails: React.FC< DisputeDetailsProps > = ( { dispute } ) => { +const DisputeDetails: React.FC< DisputeDetailsProps > = ( { + dispute, + customer, + chargeCreated, +} ) => { const now = moment(); const dueBy = moment.unix( dispute.evidence_details?.due_by ?? 0 ); const countdownDays = Math.floor( dueBy.diff( now, 'days', true ) ); @@ -55,6 +63,11 @@ const DisputeDetails: React.FC< DisputeDetailsProps > = ( { dispute } ) => { dispute={ dispute } daysRemaining={ countdownDays } /> + ) } diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index acaeee0fe39..a60580f30b4 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -48,3 +48,12 @@ margin-bottom: 8px; } } +.dispute-steps { + .dispute-steps__header { + font-weight: 600; + } + .dispute-steps__steps { + list-style-position: inside; + margin-left: 0; + } +} diff --git a/client/payment-details/dispute-details/test/index.test.tsx b/client/payment-details/dispute-details/test/index.test.tsx index e2cd36c11f6..09773712b35 100644 --- a/client/payment-details/dispute-details/test/index.test.tsx +++ b/client/payment-details/dispute-details/test/index.test.tsx @@ -142,7 +142,13 @@ describe( 'DisputeDetails', () => { } ); test( 'correctly renders dispute details', () => { const charge = getBaseCharge(); - render( ); + render( + + ); // Expect this warning to be logged to the console expect( console ).toHaveWarnedWith( @@ -187,7 +193,13 @@ describe( 'DisputeDetails', () => { submission_count: 0, }; - render( ); + render( + + ); screen.getByText( /The cardholder claims this is an unauthorized transaction/, diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx index e75f69f2caf..f3c63648648 100644 --- a/client/payment-details/summary/index.tsx +++ b/client/payment-details/summary/index.tsx @@ -376,7 +376,11 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( { { isDisputeOnTransactionPageEnabled && charge.dispute && ( - + ) } { isAuthAndCaptureEnabled && authorization && From 284243fb06ce0c57b6d67837a1ec96b4cde41477 Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 04:34:43 +0700 Subject: [PATCH 03/27] Challenge and accept icons for the 4th step from the Steps to resolve section of the dispute details on the transaction details page. --- .../dispute-details/dispute-steps.tsx | 56 ++++++++++++++++--- .../dispute-details/style.scss | 13 +++++ 2 files changed, 61 insertions(+), 8 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 92eb39baff8..3a1bfedc861 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -4,10 +4,11 @@ * External dependencies */ import React from 'react'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { createInterpolateElement } from '@wordpress/element'; import { dateI18n } from '@wordpress/date'; import moment from 'moment'; +import HelpOutlineIcon from 'gridicons/dist/help-outline'; /** * Internal dependencies @@ -15,6 +16,7 @@ import moment from 'moment'; import type { Dispute } from 'wcpay/types/disputes'; import { ChargeBillingDetails } from 'wcpay/types/charges'; import { formatExplicitCurrency } from 'utils/currency'; +import { ClickTooltip } from 'wcpay/components/tooltip'; interface Props { dispute: Dispute; @@ -27,6 +29,11 @@ const DisputeSteps: React.FC< Props > = ( { customer, chargeCreated, } ) => { + const formattedDisputeAmount = formatExplicitCurrency( + dispute.amount, + dispute.currency + ); + let emailLink; if ( customer?.email ) { const chargeDate = dateI18n( @@ -40,10 +47,7 @@ const DisputeSteps: React.FC< Props > = ( { const emailSubject = `Problem with your purchase from ${ wcpaySettings.storeName } on ${ chargeDate }?`; const emailBody = `Hello ${ customer?.name }\n\n` + - `We noticed that on ${ disputeDate }, you disputed a ${ formatExplicitCurrency( - dispute.amount, - dispute.currency - ) } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + + `We noticed that on ${ disputeDate }, you disputed a ${ formattedDisputeAmount } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + `Alternatively, if the dispute was a mistake, you could easily withdraw it by calling the number on the back of your card. Thank you so much - we appreciate your business and look forward to working with you.`; emailLink = `mailto:${ customer.email }?subject=${ encodeURIComponent( @@ -93,9 +97,45 @@ const DisputeSteps: React.FC< Props > = ( { ) }
  • - { __( - 'Challenge or accept the dispute by', - 'woocommerce-payments' + { createInterpolateElement( + __( + 'Challenge or accept the dispute by .', + 'woocommerce-payments' + ), + { + challengeicon: ( + } + buttonLabel={ __( + 'Challenge the dispute', + 'woocommerce-payments' + ) } + content={ __( + "Challenge the dispute if you consider the claim invalid. You'll need to provide evidence to back your claim. Keep in mind that challenging doesn't ensure a resolution in your favor.", + 'woocommerce-payments' + ) } + /> + ), + accepticon: ( + } + buttonLabel={ __( + 'Accept the dispute', + 'woocommerce-payments' + ) } + content={ sprintf( + __( + `Accepting this dispute will automatically close it. Your account will be charged a %s fee, and the disputed amount will be refunded to the cardholder.`, + 'woocommerce-payments' + ), + formattedDisputeAmount + ) } + /> + ), + disputeduedate: <>, + } ) }
    • diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index a60580f30b4..d91dfa5e807 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -55,5 +55,18 @@ .dispute-steps__steps { list-style-position: inside; margin-left: 0; + + .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper + > .wcpay-tooltip__content-wrapper + > [role='button'] { + margin-left: 0; + margin-right: 0; + } + + .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper + > .wcpay-tooltip__content-wrapper + + div { + display: inline; + } } } From 18f2fa5af925df8c9b299650f49204e424ffb1b2 Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 04:39:45 +0700 Subject: [PATCH 04/27] Add comment to translator explaining that %s is formatted currency amount. --- client/payment-details/dispute-details/dispute-steps.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 3a1bfedc861..78e5b7f426b 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -126,6 +126,7 @@ const DisputeSteps: React.FC< Props > = ( { 'woocommerce-payments' ) } content={ sprintf( + // Translators: %s is a formatted currency amount, eg $10.00. __( `Accepting this dispute will automatically close it. Your account will be charged a %s fee, and the disputed amount will be refunded to the cardholder.`, 'woocommerce-payments' From 5a3cbe536853449faccab1c7ea441e56c207352c Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 04:53:06 +0700 Subject: [PATCH 05/27] Show dispute response due by date at the 4th step of the Steps to resolve section. --- .../dispute-details/dispute-steps.tsx | 43 ++++++++++++++++++- .../payment-details/dispute-details/index.tsx | 1 + .../dispute-details/style.scss | 19 +++++++- 3 files changed, 59 insertions(+), 4 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 78e5b7f426b..176d1f5319b 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -4,11 +4,12 @@ * External dependencies */ import React from 'react'; -import { __, sprintf } from '@wordpress/i18n'; +import { __, _n, sprintf } from '@wordpress/i18n'; import { createInterpolateElement } from '@wordpress/element'; import { dateI18n } from '@wordpress/date'; import moment from 'moment'; import HelpOutlineIcon from 'gridicons/dist/help-outline'; +import classNames from 'classnames'; /** * Internal dependencies @@ -22,12 +23,14 @@ interface Props { dispute: Dispute; customer: ChargeBillingDetails | null; chargeCreated: number; + daysRemaining: number; } const DisputeSteps: React.FC< Props > = ( { dispute, customer, chargeCreated, + daysRemaining, } ) => { const formattedDisputeAmount = formatExplicitCurrency( dispute.amount, @@ -55,6 +58,13 @@ const DisputeSteps: React.FC< Props > = ( { ) }&body=${ encodeURIComponent( emailBody ) }`; } + const respondByDate = dispute.evidence_details?.due_by + ? dateI18n( + 'M j, Y, g:ia', + moment( dispute.evidence_details?.due_by * 1000 ).toISOString() + ) + : '–'; + return (
    @@ -135,7 +145,36 @@ const DisputeSteps: React.FC< Props > = ( { ) } /> ), - disputeduedate: <>, + disputeduedate: ( + + { respondByDate } + 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 + ) } + + + ), } ) } diff --git a/client/payment-details/dispute-details/index.tsx b/client/payment-details/dispute-details/index.tsx index 8157810be61..27f1e11647c 100644 --- a/client/payment-details/dispute-details/index.tsx +++ b/client/payment-details/dispute-details/index.tsx @@ -67,6 +67,7 @@ const DisputeDetails: React.FC< DisputeDetailsProps > = ( { dispute={ dispute } customer={ customer } chargeCreated={ chargeCreated } + daysRemaining={ countdownDays } /> ) } diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index d91dfa5e807..23eea8c4c07 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -49,10 +49,10 @@ } } .dispute-steps { - .dispute-steps__header { + &__header { font-weight: 600; } - .dispute-steps__steps { + &__steps { list-style-position: inside; margin-left: 0; @@ -68,5 +68,20 @@ + div { display: inline; } + + &__response-date { + display: inline-flex; + align-items: center; + gap: var( --grid-unit-05, 4px ); + flex-wrap: wrap; + &--warning { + color: $wp-yellow-30; + font-weight: 700; + } + &--urgent { + font-weight: 700; + color: $alert-red; + } + } } } From 53c6679259e22609577e60ce0f7ef4e46596cd1c Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 04:54:50 +0700 Subject: [PATCH 06/27] Changelog. --- changelog/add-6925-steps-to-resolve | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelog/add-6925-steps-to-resolve diff --git a/changelog/add-6925-steps-to-resolve b/changelog/add-6925-steps-to-resolve new file mode 100644 index 00000000000..9ef328c1dba --- /dev/null +++ b/changelog/add-6925-steps-to-resolve @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: This work is part of a UI improvements to increase disputes response that is behind a feature flag. A changelog entry will be added to represent the work as a whole. + + From f9c94f96a0e31dcc888bff2739d21fbeaf587869 Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 05:04:22 +0700 Subject: [PATCH 07/27] Positioning the click tool icons more correctly. --- client/payment-details/dispute-details/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index 23eea8c4c07..5dec6f29242 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -61,6 +61,7 @@ > [role='button'] { margin-left: 0; margin-right: 0; + vertical-align: text-bottom; } .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper From 45e25fae2a79bfcf81d0d30351bdfde86085ea1d Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 05:09:41 +0700 Subject: [PATCH 08/27] Add TODO to add link to issuer's evidence files link. --- .../payment-details/dispute-details/dispute-steps.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 176d1f5319b..a856bb1eb8f 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -72,10 +72,13 @@ const DisputeSteps: React.FC< Props > = ( {
    1. - { __( - "Review the claim issued by the cardholder's bank.", - 'woocommerce-payments' - ) } + { + // TODO: add link to the issuer evidence files link. See https://github.com/Automattic/woocommerce-payments/pull/7192. + __( + "Review the claim issued by the cardholder's bank.", + 'woocommerce-payments' + ) + }
    2. { customer?.email From 6fe270b87bf57f47d4de3d02fe9f6cb31eee9fa3 Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 05:35:34 +0700 Subject: [PATCH 09/27] Add TODO to link 'guidance on dispute withdrawal' to the docs when it's ready. --- .../payment-details/dispute-details/dispute-steps.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index a856bb1eb8f..ba8686d0681 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -104,10 +104,13 @@ const DisputeSteps: React.FC< Props > = ( { ) }
    3. - { __( - 'Provide guidance on dispute withdrawal if the customer agrees.', - 'woocommerce-payments' - ) } + { + // TODO: link 'guidance on dispute withdrawal' to the docs when it's ready. + __( + 'Provide guidance on dispute withdrawal if the customer agrees.', + 'woocommerce-payments' + ) + }
    4. { createInterpolateElement( From d28219e518562c9985c3090f526446a5e552e0db Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 06:30:00 +0700 Subject: [PATCH 10/27] Remove test CSS class. --- client/payment-details/dispute-details/dispute-steps.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index ba8686d0681..ffc030bc915 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -121,7 +121,6 @@ const DisputeSteps: React.FC< Props > = ( { { challengeicon: ( } buttonLabel={ __( 'Challenge the dispute', @@ -135,7 +134,6 @@ const DisputeSteps: React.FC< Props > = ( { ), accepticon: ( } buttonLabel={ __( 'Accept the dispute', From 04ee3f67f48e6bb5dcf3deb34986fc89f879ebf8 Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Thu, 14 Sep 2023 06:31:05 +0700 Subject: [PATCH 11/27] Show dispute fee instead of dispute amount in the tooltip that explains about accepting the dispute. --- .../dispute-details/dispute-steps.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index ffc030bc915..88a0360ad1c 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -32,11 +32,6 @@ const DisputeSteps: React.FC< Props > = ( { chargeCreated, daysRemaining, } ) => { - const formattedDisputeAmount = formatExplicitCurrency( - dispute.amount, - dispute.currency - ); - let emailLink; if ( customer?.email ) { const chargeDate = dateI18n( @@ -50,7 +45,10 @@ const DisputeSteps: React.FC< Props > = ( { const emailSubject = `Problem with your purchase from ${ wcpaySettings.storeName } on ${ chargeDate }?`; const emailBody = `Hello ${ customer?.name }\n\n` + - `We noticed that on ${ disputeDate }, you disputed a ${ formattedDisputeAmount } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + + `We noticed that on ${ disputeDate }, you disputed a ${ formatExplicitCurrency( + dispute.amount, + dispute.currency + ) } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + `Alternatively, if the dispute was a mistake, you could easily withdraw it by calling the number on the back of your card. Thank you so much - we appreciate your business and look forward to working with you.`; emailLink = `mailto:${ customer.email }?subject=${ encodeURIComponent( @@ -145,7 +143,8 @@ const DisputeSteps: React.FC< Props > = ( { `Accepting this dispute will automatically close it. Your account will be charged a %s fee, and the disputed amount will be refunded to the cardholder.`, 'woocommerce-payments' ), - formattedDisputeAmount + // TODO: use getDisputeFee() from https://github.com/Automattic/woocommerce-payments/pull/7118. + '' ) } /> ), From a7ddf9485db740de0da816e11f9a3f185a8dfbfc Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Mon, 18 Sep 2023 00:50:19 +0700 Subject: [PATCH 12/27] Add link to dispute withdrawal docs. --- .../dispute-details/dispute-steps.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 88a0360ad1c..16eabc9a813 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -102,13 +102,22 @@ const DisputeSteps: React.FC< Props > = ( { ) }
    5. - { - // TODO: link 'guidance on dispute withdrawal' to the docs when it's ready. + { createInterpolateElement( __( - 'Provide guidance on dispute withdrawal if the customer agrees.', + 'Provide guidance on dispute withdrawal if the customer agrees.', 'woocommerce-payments' - ) - } + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) }
    6. { createInterpolateElement( From 116a8db1b3bde6ac8062c2b86cd0486f949564f6 Mon Sep 17 00:00:00 2001 From: Shendy Kurnia Date: Mon, 18 Sep 2023 00:59:35 +0700 Subject: [PATCH 13/27] Handle when customer's name is null. --- client/payment-details/dispute-details/dispute-steps.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 16eabc9a813..e6e9aa2d759 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -43,8 +43,9 @@ const DisputeSteps: React.FC< Props > = ( { moment( dispute.created * 1000 ).toISOString() ); const emailSubject = `Problem with your purchase from ${ wcpaySettings.storeName } on ${ chargeDate }?`; + const customerName = customer?.name || ''; const emailBody = - `Hello ${ customer?.name }\n\n` + + `Hello ${ customerName }\n\n` + `We noticed that on ${ disputeDate }, you disputed a ${ formatExplicitCurrency( dispute.amount, dispute.currency From d9d006ea86998d27a6b76224206a743b61392d55 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 09:28:07 +1000 Subject: [PATCH 14/27] Update list style to match design --- .../dispute-details/style.scss | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index f133d4260d7..c8187ad3488 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -64,24 +64,33 @@ } } .dispute-steps { + margin-bottom: 24px; + &__header { font-weight: 600; + font-size: 14px; } &__steps { list-style-position: inside; - margin-left: 0; + margin: 0; + + > li { + margin: 0; + padding: 16px 10px 16px 4px; + border-bottom: 1px solid $wp-gray-5; + } .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper - > .wcpay-tooltip__content-wrapper - > [role='button'] { + > .wcpay-tooltip__content-wrapper + > [role='button'] { margin-left: 0; margin-right: 0; vertical-align: text-bottom; } .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper - > .wcpay-tooltip__content-wrapper - + div { + > .wcpay-tooltip__content-wrapper + + div { display: inline; } @@ -90,13 +99,15 @@ align-items: center; gap: var( --grid-unit-05, 4px ); flex-wrap: wrap; + font-weight: 600; + &--warning { color: $wp-yellow-30; font-weight: 700; } &--urgent { - font-weight: 700; color: $alert-red; + font-weight: 700; } } } From e8a83fe1a5ab83cb739247947c030ff06763c406 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 10:27:52 +1000 Subject: [PATCH 15/27] Remove "Review the claim" step, out of PR scope --- client/payment-details/dispute-details/dispute-steps.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index e6e9aa2d759..a0b50e34924 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -70,15 +70,6 @@ const DisputeSteps: React.FC< Props > = ( { { __( 'Steps to resolve:', 'woocommercts' ) }
      -
    1. - { - // TODO: add link to the issuer evidence files link. See https://github.com/Automattic/woocommerce-payments/pull/7192. - __( - "Review the claim issued by the cardholder's bank.", - 'woocommerce-payments' - ) - } -
    2. { customer?.email ? createInterpolateElement( From f9126c5805cf53d4f7dd5b326764946bcc66962c Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 10:38:58 +1000 Subject: [PATCH 16/27] Don't show steps for inquiries --- .../dispute-awaiting-response-details.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 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 3234d3a64f6..70386b08188 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -57,7 +57,7 @@ const DisputeAwaitingResponseDetails: React.FC< DisputeDetailsProps > = ( { 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 showDisputeStepsAndActions = ! isInquiry( dispute ); const onModalClose = () => { setModalOpen( false ); @@ -89,12 +89,14 @@ const DisputeAwaitingResponseDetails: React.FC< DisputeDetailsProps > = ( { dispute={ dispute } daysRemaining={ countdownDays } /> - + { showDisputeStepsAndActions && ( + + ) } @@ -102,7 +104,7 @@ const DisputeAwaitingResponseDetails: React.FC< DisputeDetailsProps > = ( { ) } { /* Dispute Actions */ } - { showDisputeActions && ( + { showDisputeStepsAndActions && (
      Date: Thu, 21 Sep 2023 10:46:51 +1000 Subject: [PATCH 17/27] Fix card child padding when steps not rendered (inquiries) --- client/payment-details/dispute-details/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index c8187ad3488..10059607d3b 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -17,7 +17,7 @@ } .dispute-summary-row { - margin: 24px 0; + margin-top: 24px; &__response-date { display: flex; @@ -39,6 +39,7 @@ display: flex; justify-content: start; gap: $grid-unit-10; + margin-top: 24px; @media screen and ( max-width: $break-small ) { flex-direction: column; @@ -64,7 +65,7 @@ } } .dispute-steps { - margin-bottom: 24px; + margin-top: 24px; &__header { font-weight: 600; From 19545bd7acc57e782990476436494a9ce946ba07 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 11:08:55 +1000 Subject: [PATCH 18/27] Add "external link" icon to guidance link to match design --- client/payment-details/dispute-details/dispute-steps.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index a0b50e34924..8cd0b2f3245 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { __, _n, 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'; @@ -101,12 +102,7 @@ const DisputeSteps: React.FC< Props > = ( { ), { a: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - + ), } ) } From 973a63cc5d3984a9d29472083eea8bf26521d475 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 11:32:13 +1000 Subject: [PATCH 19/27] Add/update tests for steps to resolve --- .../test/__snapshots__/index.test.tsx.snap | 18 +++++++-------- .../summary/test/index.test.tsx | 22 +++++++++++++++---- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap index 171d69d9088..524678d41c7 100644 --- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap +++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap @@ -144,7 +144,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca > Customer name @@ -461,7 +461,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th > Customer name @@ -753,7 +753,7 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = ` > Customer name @@ -1013,7 +1013,7 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = ` > Customer name @@ -1303,7 +1303,7 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1 > Customer name @@ -1799,7 +1799,7 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char > Customer name @@ -2059,7 +2059,7 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`] > Customer name @@ -2319,7 +2319,7 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha > Customer name @@ -2610,7 +2610,7 @@ exports[`PaymentDetailsSummary renders the information of a disputed charge 1`] > Customer name diff --git a/client/payment-details/summary/test/index.test.tsx b/client/payment-details/summary/test/index.test.tsx index a67bec6e6e4..94e048319fe 100755 --- a/client/payment-details/summary/test/index.test.tsx +++ b/client/payment-details/summary/test/index.test.tsx @@ -82,6 +82,7 @@ const getBaseCharge = (): Charge => }, billing_details: { name: 'Customer name', + email: 'mock@example.com', }, payment_method_details: { card: { @@ -495,6 +496,15 @@ describe( 'PaymentDetailsSummary', () => { screen.getByText( /Respond By/i ).nextSibling ).toHaveTextContent( /Sep 9, 2023/ ); + // Steps to resolve + screen.getByText( /Steps to resolve/i ); + screen.getByRole( 'link', { + name: /Email the customer/i, + } ); + screen.getByRole( 'link', { + name: /guidance on dispute withdrawal/i, + } ); + // Actions screen.getByRole( 'button', { name: /Challenge dispute/, @@ -601,7 +611,8 @@ describe( 'PaymentDetailsSummary', () => { } ); screen.getByRole( 'button', { name: /View dispute details/i } ); - // No actions rendered + // No actions or steps rendered + expect( screen.queryByText( /Steps to resolve/i ) ).toBeNull(); expect( screen.queryByRole( 'button', { name: /Challenge/i, @@ -628,7 +639,8 @@ describe( 'PaymentDetailsSummary', () => { } ); screen.getByRole( 'button', { name: /View submitted evidence/i } ); - // No actions rendered + // No actions or steps rendered + expect( screen.queryByText( /Steps to resolve/i ) ).toBeNull(); expect( screen.queryByRole( 'button', { name: /Challenge/i, @@ -659,7 +671,8 @@ describe( 'PaymentDetailsSummary', () => { ignore: '.a11y-speak-region', } ); - // No actions rendered + // No actions or steps rendered + expect( screen.queryByText( /Steps to resolve/i ) ).toBeNull(); expect( screen.queryByRole( 'button', { name: /Challenge/i, @@ -691,7 +704,8 @@ describe( 'PaymentDetailsSummary', () => { } ); screen.getByRole( 'button', { name: /View dispute details/i } ); - // No actions rendered + // No actions or steps rendered + expect( screen.queryByText( /Steps to resolve/i ) ).toBeNull(); expect( screen.queryByRole( 'button', { name: /Challenge/i, From 64556a1712e7ba81092f332c8ff204b3dc3dfba1 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 11:49:05 +1000 Subject: [PATCH 20/27] Minor code formatting --- .../dispute-details/dispute-awaiting-response-details.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 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 70386b08188..b07a39a571f 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -23,6 +23,7 @@ import { * Internal dependencies */ import type { Dispute } from 'wcpay/types/disputes'; +import type { ChargeBillingDetails } from 'wcpay/types/charges'; import wcpayTracks from 'tracks'; import { useDisputeAccept } from 'wcpay/data'; import { @@ -37,15 +38,14 @@ import DisputeSummaryRow from './dispute-summary-row'; import DisputeSteps from './dispute-steps'; import InlineNotice from 'components/inline-notice'; import './style.scss'; -import { ChargeBillingDetails } from 'wcpay/types/charges'; -interface DisputeDetailsProps { +interface Props { dispute: Dispute; customer: ChargeBillingDetails | null; chargeCreated: number; } -const DisputeAwaitingResponseDetails: React.FC< DisputeDetailsProps > = ( { +const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute, customer, chargeCreated, From 0b768b312f817ef584efb0f8b8e63539e0973a79 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 11:51:56 +1000 Subject: [PATCH 21/27] Fix tooltip shifting neighboring elements bug --- client/components/tooltip/style.scss | 5 +++++ client/payment-details/dispute-details/style.scss | 6 ------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/client/components/tooltip/style.scss b/client/components/tooltip/style.scss index 2bd7d4736bc..27122be036e 100644 --- a/client/components/tooltip/style.scss +++ b/client/components/tooltip/style.scss @@ -3,6 +3,11 @@ // ensures that the element needed for position calculations isn't included in the DOM layout display: contents; + // fixes a UI bug where the tooltip can shift neighboring elements when it appears + > div { + display: inline; + } + // Styles for buttonIcon [role='button'] { cursor: pointer; diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index 10059607d3b..89bc42824b1 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -89,12 +89,6 @@ vertical-align: text-bottom; } - .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper - > .wcpay-tooltip__content-wrapper - + div { - display: inline; - } - &__response-date { display: inline-flex; align-items: center; From 6a55603106adf37389618fde39ba29cb0dba8829 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 11:57:56 +1000 Subject: [PATCH 22/27] Add tooltip component vertical-align as a sensible default --- client/components/tooltip/style.scss | 1 + client/payment-details/dispute-details/style.scss | 8 ++------ 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/client/components/tooltip/style.scss b/client/components/tooltip/style.scss index 27122be036e..a7b66916aae 100644 --- a/client/components/tooltip/style.scss +++ b/client/components/tooltip/style.scss @@ -17,6 +17,7 @@ transition: all 0.3s ease; fill: currentColor; margin: 0 0.4em; + vertical-align: text-bottom; &:focus, &:hover, diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index 89bc42824b1..e51559f4fcd 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -81,12 +81,8 @@ border-bottom: 1px solid $wp-gray-5; } - .wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper - > .wcpay-tooltip__content-wrapper - > [role='button'] { - margin-left: 0; - margin-right: 0; - vertical-align: text-bottom; + .wcpay-tooltip__content-wrapper > [role='button'] { + margin: 0; } &__response-date { From 3d35ecc1e5b0c5b0c2b0d15f7bc5d31999cae2ef Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 11:59:50 +1000 Subject: [PATCH 23/27] Add dispute fee to accept tooltip --- client/payment-details/dispute-details/dispute-steps.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 8cd0b2f3245..e6bad46635f 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -19,6 +19,7 @@ import type { Dispute } from 'wcpay/types/disputes'; import { ChargeBillingDetails } from 'wcpay/types/charges'; import { formatExplicitCurrency } from 'utils/currency'; import { ClickTooltip } from 'wcpay/components/tooltip'; +import { getDisputeFeeFormatted } from 'wcpay/disputes/utils'; interface Props { dispute: Dispute; @@ -140,8 +141,10 @@ const DisputeSteps: React.FC< Props > = ( { `Accepting this dispute will automatically close it. Your account will be charged a %s fee, and the disputed amount will be refunded to the cardholder.`, 'woocommerce-payments' ), - // TODO: use getDisputeFee() from https://github.com/Automattic/woocommerce-payments/pull/7118. - '' + getDisputeFeeFormatted( + dispute, + true + ) || '-' ) } /> ), From 787b8d99305d7706d214fc579d6a167f2586d603 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 14:44:02 +1000 Subject: [PATCH 24/27] Make email subject and body translatable --- .../dispute-details/dispute-steps.tsx | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index e6bad46635f..5ae95602069 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -44,16 +44,29 @@ const DisputeSteps: React.FC< Props > = ( { 'Y-m-d', moment( dispute.created * 1000 ).toISOString() ); - const emailSubject = `Problem with your purchase from ${ wcpaySettings.storeName } on ${ chargeDate }?`; + const emailSubject = sprintf( + // Translators: %1$s is the store name, %2$s is the charge date. + __( + `Problem with your purchase from %1$s on %2$s?`, + 'woocommerce-payments' + ), + wcpaySettings.storeName, + chargeDate + ); const customerName = customer?.name || ''; - const emailBody = - `Hello ${ customerName }\n\n` + - `We noticed that on ${ disputeDate }, you disputed a ${ formatExplicitCurrency( - dispute.amount, - dispute.currency - ) } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + - `Alternatively, if the dispute was a mistake, you could easily withdraw it by calling the number on the back of your card. Thank you so much - we appreciate your business and look forward to working with you.`; - + const emailBody = sprintf( + // Translators: %1$s is the customer name, %2$s is the dispute date, %3$s is the dispute amount with currency-code e.g. $15 USD, %4$s is the charge date. + __( + `Hello %1$s\n\n` + + `We noticed that on %2$s, you disputed a %3$s charge on %4$s. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` + + `Alternatively, if the dispute was a mistake, you can easily withdraw it by calling the number on the back of your card. Thank you so much - we appreciate your business and look forward to working with you.`, + 'woocommerce-payments' + ), + customerName, + disputeDate, + formatExplicitCurrency( dispute.amount, dispute.currency ), + chargeDate + ); emailLink = `mailto:${ customer.email }?subject=${ encodeURIComponent( emailSubject ) }&body=${ encodeURIComponent( emailBody ) }`; From 341ef80ded43e6381dcb60924a33496fb4073609 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 21 Sep 2023 14:47:15 +1000 Subject: [PATCH 25/27] Fix typo in translatable string domain --- client/payment-details/dispute-details/dispute-steps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx index 5ae95602069..dc6ec5f10f8 100644 --- a/client/payment-details/dispute-details/dispute-steps.tsx +++ b/client/payment-details/dispute-details/dispute-steps.tsx @@ -82,7 +82,7 @@ const DisputeSteps: React.FC< Props > = ( { return (
      - { __( 'Steps to resolve:', 'woocommercts' ) } + { __( 'Steps to resolve:', 'woocommerce-payments' ) }
      1. From 4a10c2ae69c05cdfa0d7a310bcc9ffb468c58378 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Fri, 22 Sep 2023 08:08:14 +1000 Subject: [PATCH 26/27] Add comment for temp inquiry restriction --- .../dispute-details/dispute-awaiting-response-details.tsx | 1 + 1 file changed, 1 insertion(+) 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 b07a39a571f..054e5dbd823 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -57,6 +57,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { 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; + // This is a temporary restriction and can be removed once steps and actions for inquiries are implemented. const showDisputeStepsAndActions = ! isInquiry( dispute ); const onModalClose = () => { From 92752692ebad36a6752195c77c601bf5e4911ca8 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Fri, 22 Sep 2023 08:08:41 +1000 Subject: [PATCH 27/27] Improve CSS comment grammar --- client/components/tooltip/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/tooltip/style.scss b/client/components/tooltip/style.scss index a7b66916aae..b0d053c2fcb 100644 --- a/client/components/tooltip/style.scss +++ b/client/components/tooltip/style.scss @@ -3,7 +3,7 @@ // ensures that the element needed for position calculations isn't included in the DOM layout display: contents; - // fixes a UI bug where the tooltip can shift neighboring elements when it appears + // Ensure that the tooltip doesn't shift neighboring elements when it appears. > div { display: inline; }