@@ -190,7 +240,6 @@ const PaymentMethod = ( {
required={ required }
status={ status }
disabled={ disabled }
- id={ id }
/>
@@ -201,7 +250,6 @@ const PaymentMethod = ( {
required={ required }
status={ status }
disabled={ disabled }
- id={ id }
/>
diff --git a/client/components/payment-methods-list/style.scss b/client/components/payment-methods-list/style.scss
index b08ff5ed6f6..7cf4f570e85 100644
--- a/client/components/payment-methods-list/style.scss
+++ b/client/components/payment-methods-list/style.scss
@@ -1,3 +1,14 @@
.payment-methods-list {
margin: 0;
}
+
+.woopayments-request-jcb {
+ margin: $grid-unit-30 $grid-unit-30 0 $grid-unit-30 !important;
+}
+
+.wcpay-tooltip__tooltip {
+ &.wcpay-tooltip__tooltip--dark a {
+ color: $white;
+ text-decoration: underline;
+ }
+}
diff --git a/client/components/tooltip/index.tsx b/client/components/tooltip/index.tsx
index 3a53b8b691f..1526a4b78d8 100644
--- a/client/components/tooltip/index.tsx
+++ b/client/components/tooltip/index.tsx
@@ -2,6 +2,7 @@
* External dependencies
*/
import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
import { noop } from 'lodash';
import { Icon } from '@wordpress/components';
@@ -112,6 +113,7 @@ export const ClickTooltip: React.FC< TooltipProps > = ( {
buttonLabel,
buttonSize = 16,
children,
+ className,
...props
} ) => {
const [ isClicked, setIsClicked ] = useState( false );
@@ -144,7 +146,10 @@ export const ClickTooltip: React.FC< TooltipProps > = ( {
parentElement={ tooltipParentRef.current || undefined }
onHide={ handleHide }
isVisible={ isVisible || isClicked }
- className="wcpay-tooltip--click__tooltip"
+ className={ classNames(
+ 'wcpay-tooltip--click__tooltip',
+ className
+ ) }
>
{ buttonIcon ? (
div {
+ display: inline;
+ }
+
// Styles for buttonIcon
[role='button'] {
cursor: pointer;
@@ -12,6 +17,7 @@
transition: all 0.3s ease;
fill: currentColor;
margin: 0 0.4em;
+ vertical-align: text-bottom;
&:focus,
&:hover,
diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js
index 3337cb4cb1d..fffe352092f 100644
--- a/client/components/woopay/save-user/checkout-page-save-user.js
+++ b/client/components/woopay/save-user/checkout-page-save-user.js
@@ -51,6 +51,8 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
phoneFieldValue =
document.getElementById( 'phone' )?.value ||
document.getElementById( 'shipping-phone' )?.value ||
+ // in case of virtual products, the shipping phone is not available. So we also need to check the billing phone.
+ document.getElementById( 'billing-phone' )?.value ||
'';
} else {
// for classic checkout.
@@ -97,7 +99,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
if ( isChecked ) {
setPhoneNumber( getPhoneFieldValue() );
} else {
- setPhoneNumber( null );
+ setPhoneNumber( '' );
if ( isBlocksCheckout ) {
sendExtensionData( true );
}
@@ -287,11 +289,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
value={ `${ viewportWidth }x${ viewportHeight }` }
/>
( {
recordUserEvent: jest.fn(),
} ) );
+const BlocksCheckoutEnvironmentMock = ( { children } ) => (
+ getDispute( id ),
+ dispute: getDispute( id ),
+ error: getDisputeError( id ),
isLoading: isResolving( 'getDispute', [ id ] ),
};
},
@@ -40,7 +49,32 @@ export const useDispute = (
const { acceptDispute } = useDispatch( STORE_NAME );
const doAccept = () => acceptDispute( id );
- return { dispute, isLoading, doAccept };
+ return { dispute, isLoading, error, doAccept };
+};
+
+/**
+ * Returns the dispute accept function and loading state.
+ * Does not return or fetch the dispute object.
+ */
+export const useDisputeAccept = (
+ dispute: Dispute
+): {
+ doAccept: () => void;
+ isLoading: boolean;
+} => {
+ const { isLoading } = useSelect(
+ ( select ) => {
+ const { isResolving } = select( STORE_NAME );
+
+ return {
+ isLoading: isResolving( 'getDispute', [ dispute.id ] ),
+ };
+ },
+ [ dispute.id ]
+ );
+ const { acceptTransactionDetailsDispute } = useDispatch( STORE_NAME );
+ const doAccept = () => acceptTransactionDetailsDispute( dispute );
+ return { doAccept, isLoading };
};
export const useDisputeEvidence = (): {
diff --git a/client/data/disputes/reducer.js b/client/data/disputes/reducer.js
index 3312bb2b9f9..f6b88f90452 100644
--- a/client/data/disputes/reducer.js
+++ b/client/data/disputes/reducer.js
@@ -15,7 +15,7 @@ const defaultState = { byId: {}, queries: {}, summary: {}, cached: {} };
const receiveDisputes = (
state = defaultState,
- { type, query = {}, data = [] }
+ { type, query = {}, data = [], id, error }
) => {
const index = getResourceId( query );
@@ -25,6 +25,12 @@ const receiveDisputes = (
...state,
byId: { ...state.byId, [ data.id ]: data },
};
+ case TYPES.SET_ERROR_FOR_DISPUTE:
+ state = {
+ ...state,
+ byId: { ...state.byId, [ id ]: { error } },
+ };
+ break;
case TYPES.SET_DISPUTES:
return {
...state,
diff --git a/client/data/disputes/resolvers.js b/client/data/disputes/resolvers.js
index 3676df92d60..ee82f790c51 100644
--- a/client/data/disputes/resolvers.js
+++ b/client/data/disputes/resolvers.js
@@ -18,6 +18,7 @@ import {
updateDispute,
updateDisputes,
updateDisputesSummary,
+ updateErrorForDispute,
} from './actions';
const formatQueryFilters = ( query ) => ( {
@@ -61,6 +62,7 @@ export function* getDispute( id ) {
'createErrorNotice',
__( 'Error retrieving dispute.', 'woocommerce-payments' )
);
+ yield updateErrorForDispute( id, undefined, e );
}
}
diff --git a/client/data/disputes/selectors.js b/client/data/disputes/selectors.js
index 4bd5347c82a..b592e518298 100644
--- a/client/data/disputes/selectors.js
+++ b/client/data/disputes/selectors.js
@@ -26,6 +26,11 @@ export const getDispute = ( state, id ) => {
return disputeById[ id ];
};
+export const getDisputeError = ( state, id ) => {
+ const disputeById = getDisputesState( state ).byId || {};
+ return disputeById[ id ]?.error;
+};
+
export const getCachedDispute = ( state, id ) => {
const disputeById = getDisputesState( state ).cached || {};
return disputeById[ id ];
diff --git a/client/data/disputes/test/resolvers.js b/client/data/disputes/test/resolvers.js
index 5b576a65cf7..cd5538de148 100644
--- a/client/data/disputes/test/resolvers.js
+++ b/client/data/disputes/test/resolvers.js
@@ -13,6 +13,7 @@ import {
updateDispute,
updateDisputes,
updateDisputesSummary,
+ updateErrorForDispute,
} from '../actions';
import { getDispute, getDisputes, getDisputesSummary } from '../resolvers';
@@ -68,6 +69,9 @@ describe( 'getDispute resolver', () => {
expect.any( String )
)
);
+ expect( generator.next().value ).toEqual(
+ updateErrorForDispute( 'dp_mock1', undefined, errorResponse )
+ );
} );
} );
} );
diff --git a/client/data/multi-currency/actions.js b/client/data/multi-currency/actions.js
index 857107ef732..6da75dcef32 100644
--- a/client/data/multi-currency/actions.js
+++ b/client/data/multi-currency/actions.js
@@ -118,7 +118,8 @@ export function* submitCurrencySettings( currencyCode, settings ) {
export function* submitStoreSettingsUpdate(
isAutoSwitchEnabled,
- isStorefrontSwitcherEnabled
+ isStorefrontSwitcherEnabled,
+ suppressNotices = false
) {
try {
const result = yield apiFetch( {
@@ -136,6 +137,8 @@ export function* submitStoreSettingsUpdate(
yield updateStoreSettings( result );
+ if ( suppressNotices ) return;
+
yield dispatch( 'core/notices' ).createSuccessNotice(
__( 'Store settings saved.', 'woocommerce-payments' )
);
diff --git a/client/data/settings/actions.js b/client/data/settings/actions.js
index 6444df92b4b..137a01b31fc 100644
--- a/client/data/settings/actions.js
+++ b/client/data/settings/actions.js
@@ -225,6 +225,12 @@ export function* saveSettings() {
yield dispatch( 'core/notices' ).createErrorNotice(
__( 'Error saving settings.', 'woocommerce-payments' )
);
+
+ if ( error.server_error ) {
+ yield dispatch( 'core/notices' ).createErrorNotice(
+ error.server_error
+ );
+ }
} finally {
yield updateIsSavingSettings( false, error );
}
diff --git a/client/disputes/details/index.tsx b/client/disputes/details/index.tsx
index e8e43312fcc..e8af4bbcf97 100644
--- a/client/disputes/details/index.tsx
+++ b/client/disputes/details/index.tsx
@@ -23,7 +23,7 @@ import { TestModeNotice, topics } from 'components/test-mode-notice';
import '../style.scss';
import { Dispute } from 'wcpay/types/disputes';
-const DisputeDetails = ( {
+const LegacyDisputeDetails = ( {
query: { id: disputeId },
}: {
query: { id: string };
@@ -156,4 +156,4 @@ const DisputeDetails = ( {
);
};
-export default DisputeDetails;
+export default LegacyDisputeDetails;
diff --git a/client/disputes/index.tsx b/client/disputes/index.tsx
index 3ba2782f82f..90880e592d2 100644
--- a/client/disputes/index.tsx
+++ b/client/disputes/index.tsx
@@ -207,14 +207,17 @@ export const DisputesList = (): JSX.Element => {
const rows = disputes.map( ( dispute ) => {
const clickable = ( children: React.ReactNode ): JSX.Element => (
{ children }
);
const detailsLink = (
-
+
+
+
+
+ { children }
+
+);
+
describe( 'CheckoutPageSaveUser', () => {
beforeEach( () => {
useWooPayUser.mockImplementation( () => false );
+ extensionCartUpdate.mockResolvedValue( {} );
useSelectedPaymentMethod.mockImplementation( () => ( {
isWCPayChosen: true,
@@ -65,7 +78,7 @@ describe( 'CheckoutPageSaveUser', () => {
} );
afterEach( () => {
- jest.restoreAllMocks();
+ jest.resetAllMocks();
} );
it( 'should render checkbox for saving WooPay user when user is not registered and selected payment method is card', () => {
@@ -137,7 +150,9 @@ describe( 'CheckoutPageSaveUser', () => {
} );
it( 'should render the save user form when checkbox is checked for blocks checkout', () => {
- render( +
+ { __(
+ 'A currency switcher is also available in your widgets.',
+ 'woocommerce-payments'
+ ) }
+
) : null }
-
- { __(
- 'A currency switcher is also available in your widgets.',
- 'woocommerce-payments'
- ) }
-
diff --git a/client/multi-currency-setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap b/client/multi-currency-setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap
index 835869834ca..ef97ef8d897 100644
--- a/client/multi-currency-setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap
+++ b/client/multi-currency-setup/tasks/store-settings-task/test/__snapshots__/index.test.js.snap
@@ -121,9 +121,8 @@ exports[`Multi-Currency store settings store settings task renders correctly: sn
-
A currency switcher is also available in your widgets.
diff --git a/client/multi-currency-setup/tasks/store-settings-task/test/index.test.js b/client/multi-currency-setup/tasks/store-settings-task/test/index.test.js
index 0fd0310fe52..e81b7b08f99 100644
--- a/client/multi-currency-setup/tasks/store-settings-task/test/index.test.js
+++ b/client/multi-currency-setup/tasks/store-settings-task/test/index.test.js
@@ -8,12 +8,19 @@ import { render, screen, fireEvent } from '@testing-library/react';
* Internal dependencies
*/
import WizardTaskContext from '../../../../additional-methods-setup/wizard/task/context';
-import { useCurrencies, useStoreSettings } from 'wcpay/data';
+import {
+ useCurrencies,
+ useStoreSettings,
+ useSettings,
+ useMultiCurrency,
+} from 'wcpay/data';
import StoreSettingsTask from '..';
jest.mock( 'wcpay/data', () => ( {
useStoreSettings: jest.fn(),
useCurrencies: jest.fn(),
+ useSettings: jest.fn(),
+ useMultiCurrency: jest.fn(),
} ) );
const changeableSettings = [
@@ -43,6 +50,11 @@ useStoreSettings.mockReturnValue( {
submitStoreSettingsUpdate: jest.fn(),
} );
+useSettings.mockReturnValue( {
+ saveSettings: jest.fn().mockResolvedValue( {} ),
+ isSaving: false,
+} );
+
const setCompletedMock = jest.fn();
const createContainer = () => {
@@ -61,6 +73,10 @@ describe( 'Multi-Currency store settings', () => {
jest.clearAllMocks();
} );
+ beforeEach( () => {
+ useMultiCurrency.mockReturnValue( [ true, jest.fn() ] );
+ } );
+
test( 'store settings task renders correctly', () => {
const container = createContainer();
expect( container ).toMatchSnapshot(
@@ -83,6 +99,40 @@ describe( 'Multi-Currency store settings', () => {
} );
} );
+ test( 'multi-currency is enabled if it was previously disabled', async () => {
+ useMultiCurrency.mockReturnValue( [ false, jest.fn() ] );
+
+ createContainer();
+ const { submitStoreSettingsUpdate } = useStoreSettings();
+ const { saveSettings } = useSettings();
+ const [ , updateIsMultiCurrencyEnabled ] = useMultiCurrency();
+
+ fireEvent.click(
+ screen.getByRole( 'button', {
+ name: /Continue/,
+ } )
+ );
+
+ expect( saveSettings ).toBeCalled();
+ expect( updateIsMultiCurrencyEnabled ).toBeCalledWith( true );
+ expect( submitStoreSettingsUpdate ).toBeCalledWith(
+ false,
+ false,
+ true
+ );
+
+ changeableSettings.forEach( ( setting ) => {
+ fireEvent.click( screen.getByTestId( setting ) );
+ expect( screen.getByTestId( setting ) ).toBeChecked();
+ } );
+ fireEvent.click(
+ screen.getByRole( 'button', {
+ name: /Continue/,
+ } )
+ );
+ expect( submitStoreSettingsUpdate ).toBeCalledWith( true, true, true );
+ } );
+
test( 'store settings are saved with continue button click', () => {
createContainer();
const { submitStoreSettingsUpdate } = useStoreSettings();
@@ -91,7 +141,11 @@ describe( 'Multi-Currency store settings', () => {
name: /Continue/,
} )
);
- expect( submitStoreSettingsUpdate ).toBeCalledWith( false, false );
+ expect( submitStoreSettingsUpdate ).toBeCalledWith(
+ false,
+ false,
+ false
+ );
changeableSettings.forEach( ( setting ) => {
fireEvent.click( screen.getByTestId( setting ) );
@@ -102,7 +156,7 @@ describe( 'Multi-Currency store settings', () => {
name: /Continue/,
} )
);
- expect( submitStoreSettingsUpdate ).toBeCalledWith( true, true );
+ expect( submitStoreSettingsUpdate ).toBeCalledWith( true, true, false );
} );
test( 'store settings preview should open a modal with an iframe', () => {
diff --git a/client/multi-currency/multi-currency-settings/store-settings/index.js b/client/multi-currency/multi-currency-settings/store-settings/index.js
index ccb8b8f4818..eddeb570ccf 100644
--- a/client/multi-currency/multi-currency-settings/store-settings/index.js
+++ b/client/multi-currency/multi-currency-settings/store-settings/index.js
@@ -139,35 +139,43 @@ const StoreSettings = () => {
) }
{ storeSettings.site_theme === 'Storefront' ? (
-
- { createInterpolateElement(
- sprintf(
- /* translators: %s: url to the widgets page */
- __(
- 'A currency switcher is also available in your widgets. ' +
- 'Configure now ',
+ <>
+
+ ) }
+ />
+
+ { createInterpolateElement(
+ sprintf(
+ /* translators: %s: url to the widgets page */
+ __(
+ 'A currency switcher is also available in your widgets. ' +
+ 'Configure now ',
+ 'woocommerce-payments'
+ ),
+ 'widgets.php'
+ ),
+ {
+ linkToWidgets: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ }
+ ) }
+
+
+ ) : null }
{ __(
@@ -60,12 +64,21 @@ const ConnectionSuccessNotice: React.FC = () => {
) : (
<>
-
- { __(
- 'Congratulations! Your store has been verified.',
- 'woocommerce-payments'
- ) }
-
+ { accountStatus !== 'complete' ? (
+
+ { __(
+ 'Congratulations! Your store is being verified.',
+ 'woocommerce-payments'
+ ) }
+
+ ) : (
+
+ { __(
+ 'Congratulations! Your store has been verified.',
+ 'woocommerce-payments'
+ ) }
+
+ ) }
) }
+
+
+
+ { __(
+ `You initiated a challenge to this dispute. Click 'Continue with challenge' to proceed with your draft response.`,
+ 'woocommerce-payments'
+ ) }
+
+ ) }
+
+
+
+
+ );
+};
+
+export default DisputeAwaitingResponseDetails;
diff --git a/client/payment-details/dispute-details/dispute-due-by-date.tsx b/client/payment-details/dispute-details/dispute-due-by-date.tsx
new file mode 100644
index 00000000000..00c74ee2745
--- /dev/null
+++ b/client/payment-details/dispute-details/dispute-due-by-date.tsx
@@ -0,0 +1,52 @@
+/**
+ * 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';
+
+const DisputeDueByDate: React.FC< {
+ dueBy: number;
+} > = ( { 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 (
+
+ { respondByDate }
+ 2,
+ } ) }
+ >
+ { daysRemaining > 0 &&
+ sprintf(
+ // Translators: %d is the number of days left to respond to the dispute.
+ _n(
+ '(%d day left to respond)',
+ '(%d days left to respond)',
+ daysRemaining,
+ 'woocommerce-payments'
+ ),
+ daysRemaining
+ ) }
+
+ { daysRemaining === 0 &&
+ __( '(Last day today)', 'woocommerce-payments' ) }
+ { daysRemaining < 0 &&
+ __( '(Past due)', 'woocommerce-payments' ) }
+
+
+ );
+};
+
+export default DisputeDueByDate;
diff --git a/client/payment-details/dispute-details/dispute-notice.tsx b/client/payment-details/dispute-details/dispute-notice.tsx
index 44c3286704b..664bfd7b897 100644
--- a/client/payment-details/dispute-details/dispute-notice.tsx
+++ b/client/payment-details/dispute-details/dispute-notice.tsx
@@ -5,6 +5,7 @@
*/
import React from 'react';
import { __, sprintf } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
/**
@@ -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 =
reasons[ dispute.reason ]?.claim ??
__(
'The cardholder claims this is an unrecognized charge.',
'woocommerce-payments'
);
- const noticeText = isInquiry( dispute )
- ? /* translators: 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
- '%s You can challenge their claim if you believe it’s invalid. Not responding will result in an automatic loss. Learn more',
- 'woocommerce-payments'
- )
- : /* translators: 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
- '%s 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. Learn more about responding to disputes',
- 'woocommerce-payments'
- );
+ /* translators: link to dispute documentation. %s is the clients claim for the dispute, eg "The cardholder claims this is an unrecognized charge." */
+ let noticeText = __(
+ '%s 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. Learn more about responding to disputes',
+ 'woocommerce-payments'
+ );
+ let learnMoreDocsUrl =
+ 'https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#responding';
+
+ if ( isInquiry( dispute ) ) {
+ /* translators: link to dispute inquiry documentation. %s is the clients claim for the dispute, eg "The cardholder claims this is an unrecognized charge." */
+ noticeText = __(
+ '%s You can challenge their claim if you believe it’s invalid. ' +
+ 'Not responding will result in an automatic loss. Learn more about payment inquiries',
+ 'woocommerce-payments'
+ );
+ learnMoreDocsUrl =
+ 'https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#inquiries';
+ }
return (
+
+
+
+
+
+
+ { /** Accept dispute modal */ }
+ { isModalOpen && (
+
+
+
+ { line.icon }
+
+
+ { line.description }
+
+
+ )
+ ) }
+
+
+
+
+
+
+ ) }
+
+ }
+ + + { __( + 'Before proceeding, please take note of the following:', + 'woocommerce-payments' + ) } + +
+ + { disputeAcceptAction.modalLines.map( + ( line, key ) => ( +
+
+ );
+};
+
+export const InquirySteps: 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 = 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 = 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 ) }`;
+ }
+
+ return (
+
+ { __( 'Steps to resolve:', 'woocommerce-payments' ) }
+
+ -
+
- + { customer?.email + ? createInterpolateElement( + __( + 'Email the customer to identify the issue and work towards a resolution where possible.', + 'woocommerce-payments' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) + : __( + 'Email the customer to identify the issue and work towards a resolution where possible.', + 'woocommerce-payments' + ) } + +
-
+ { createInterpolateElement(
+ __(
+ 'Assist the customer in withdrawing their dispute if they agree to do so.',
+ 'woocommerce-payments'
+ ),
+ {
+ a: (
+
+ ), + } + ) } +
+ -
+ { createInterpolateElement(
+ __(
+ 'Challenge
or accept the dispute by .', + 'woocommerce-payments' + ), + { + challengeIcon: ( + } + buttonLabel={ __( + 'Challenge the dispute tooltip', + '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 tooltip', + 'woocommerce-payments' + ) } + content={ sprintf( + // Translators: %s is a formatted currency amount, eg $10.00. + __( + `Accepting this dispute will automatically close it. The disputed amount and the %s dispute fee will not be returned to you.`, + 'woocommerce-payments' + ), + getDisputeFeeFormatted( + dispute, + true + ) || '-' + ) } + /> + ), + dueByDate: ( + + ), + } + ) } +
+
+
+ );
+};
diff --git a/client/payment-details/dispute-details/dispute-summary-row.tsx b/client/payment-details/dispute-details/dispute-summary-row.tsx
index 160abaeb000..ac6dada265e 100644
--- a/client/payment-details/dispute-details/dispute-summary-row.tsx
+++ b/client/payment-details/dispute-details/dispute-summary-row.tsx
@@ -6,34 +6,26 @@
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
*/
import type { Dispute } from 'wcpay/types/disputes';
import { HorizontalList } from 'wcpay/components/horizontal-list';
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatExplicitCurrency } from 'wcpay/utils/currency';
import { reasons } from 'wcpay/disputes/strings';
import { formatStringValue } from 'wcpay/utils';
import { ClickTooltip } from 'wcpay/components/tooltip';
import Paragraphs from 'wcpay/components/paragraphs';
+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
);
@@ -42,7 +34,7 @@ const DisputeSummaryRow: React.FC< Props > = ( { dispute, daysRemaining } ) => {
const columns = [
{
title: __( 'Dispute Amount', 'woocommerce-payments' ),
- content: formatCurrency( dispute.amount, dispute.currency ),
+ content: formatExplicitCurrency( dispute.amount, dispute.currency ),
},
{
title: __( 'Disputed On', 'woocommerce-payments' ),
@@ -93,30 +85,7 @@ const DisputeSummaryRow: React.FC< Props > = ( { dispute, daysRemaining } ) => {
{
title: __( 'Respond By', 'woocommerce-payments' ),
content: (
-
- { 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
- ) }
-
-
+
+ { __( 'Steps to resolve:', 'woocommerce-payments' ) }
+
+ -
+
- + { customer?.email + ? createInterpolateElement( + __( + 'Email the customer to identify the issue and work towards a resolution where possible.', + 'woocommerce-payments' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) + : __( + 'Email the customer to identify the issue and work towards a resolution where possible.', + 'woocommerce-payments' + ) } + +
-
+ { createInterpolateElement(
+ __(
+ 'Submit evidence
or issue a refund by .', + 'woocommerce-payments' + ), + { + submitEvidenceIcon: ( + } + buttonLabel={ __( + 'Submit evidence tooltip', + 'woocommerce-payments' + ) } + content={ createInterpolateElement( + __( + "To submit evidence, provide documentation that supports your case. Keep in mind that submitting evidence doesn't ensure a favorable outcome. If the cardholder agrees to withdraw the inquiry, you'll still need to officially submit your evidence to prevent bank escalation. Learn more ", + 'woocommerce-payments' + ), + { + learnMoreLink: ( ++ ), + } + ) } + /> + ), + dueByDate: ( + + ), + } + ) } +
+
-
- { issuerEvidence.text_evidence && (
-
-
-
+ { issuerEvidence.map( ( evidence, i ) => ( + -
+ { evidence.text_evidence && (
+
+ ) } + { evidence.file_evidence.map( ( fileId ) => ( + + ) ) }
- ) }
- { issuerEvidence.file_evidence.map(
- ( fileId: string, i: any ) => (
- -
-
-
- )
- ) }
+ ) ) }
-
-
- { isAwaitingResponse( dispute.status ) &&
- countdownDays >= 0 && (
- <>
-
- { __(
- `You initiated a challenge to this dispute. Click 'Continue with challenge' to proceed with your draft response.`,
- 'woocommerce-payments'
- ) }
-
- ) }
-
-
-
- );
-};
-
-export default DisputeDetails;
diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss
index 628ab098b39..e51559f4fcd 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;
@@ -34,6 +34,22 @@
}
}
}
+
+ &__actions {
+ display: flex;
+ justify-content: start;
+ gap: $grid-unit-10;
+ margin-top: 24px;
+
+ @media screen and ( max-width: $break-small ) {
+ flex-direction: column;
+
+ .components-button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+ }
}
}
.dispute-reason-tooltip {
@@ -48,6 +64,85 @@
margin-bottom: 8px;
}
}
+.dispute-steps {
+ margin-top: 24px;
+
+ &__header {
+ font-weight: 600;
+ font-size: 14px;
+ }
+ &__steps {
+ list-style-position: inside;
+ margin: 0;
+
+ > li {
+ margin: 0;
+ padding: 16px 10px 16px 4px;
+ border-bottom: 1px solid $wp-gray-5;
+ }
+
+ .wcpay-tooltip__content-wrapper > [role='button'] {
+ margin: 0;
+ }
+
+ &__response-date {
+ display: inline-flex;
+ align-items: center;
+ gap: var( --grid-unit-05, 4px );
+ flex-wrap: wrap;
+ font-weight: 600;
+
+ &--warning {
+ color: $wp-yellow-30;
+ font-weight: 700;
+ }
+ &--urgent {
+ color: $alert-red;
+ font-weight: 700;
+ }
+ }
+ }
+}
+.transaction-details-dispute-accept-modal {
+ max-width: 600px;
+
+ .components-modal__content {
+ padding-top: $grid-unit-30;
+ }
+
+ &__icon {
+ flex-shrink: 0;
+ padding: 6px;
+ margin-right: $grid-unit-10;
+ }
+
+ &__actions {
+ margin-top: $grid-unit-30;
+ }
+}
+
+.transaction-details-dispute-footer {
+ background-color: #f2f4f5;
+
+ &__actions {
+ flex-shrink: 0;
+ }
+
+ &--primary {
+ background-color: $wp-blue-0;
+ }
+
+ @media screen and ( max-width: $break-small ) {
+ .components-flex {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .components-flex-item {
+ margin: 10px 0;
+ }
+ }
+}
.dispute-evidence {
// Override WordPress core PanelBody boxy styles. Ours is more inline content.
diff --git a/client/payment-details/dispute-details/test/index.test.tsx b/client/payment-details/dispute-details/test/index.test.tsx
deleted file mode 100644
index 9787972fd17..00000000000
--- a/client/payment-details/dispute-details/test/index.test.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-/** @format */
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import type { Dispute } from 'wcpay/types/disputes';
-import type { Charge } from 'wcpay/types/charges';
-import DisputeDetails from '..';
-
-declare const global: {
- wcSettings: {
- locale: {
- siteLocale: string;
- };
- };
- wcpaySettings: {
- isSubscriptionsActive: boolean;
- zeroDecimalCurrencies: string[];
- currencyData: Record< string, any >;
- connect: {
- country: string;
- };
- featureFlags: {
- isAuthAndCaptureEnabled: boolean;
- };
- };
-};
-
-global.wcpaySettings = {
- isSubscriptionsActive: false,
- zeroDecimalCurrencies: [],
- connect: {
- country: 'US',
- },
- featureFlags: {
- isAuthAndCaptureEnabled: true,
- },
- currencyData: {
- US: {
- code: 'USD',
- symbol: '$',
- symbolPosition: 'left',
- thousandSeparator: ',',
- decimalSeparator: '.',
- precision: 2,
- },
- },
-};
-
-interface ChargeWithDisputeRequired extends Charge {
- dispute: Dispute;
-}
-
-const getBaseCharge = (): ChargeWithDisputeRequired =>
- ( {
- id: 'ch_38jdHA39KKA',
- /* Stripe data comes in seconds, instead of the default Date milliseconds */
- created: Date.parse( 'Sep 19, 2019, 5:24 pm' ) / 1000,
- amount: 2000,
- amount_refunded: 0,
- application_fee_amount: 70,
- disputed: true,
- dispute: {
- id: 'dp_1',
- amount: 6800,
- charge: 'ch_38jdHA39KKA',
- order: null,
- balance_transactions: [
- {
- amount: -2000,
- currency: 'usd',
- fee: 1500,
- },
- ],
- created: 1693453017,
- currency: 'usd',
- evidence: {
- billing_address: '123 test address',
- customer_email_address: 'test@email.com',
- customer_name: 'Test customer',
- shipping_address: '123 test address',
- },
- issuer_evidence: null,
- evidence_details: {
- due_by: 1694303999,
- has_evidence: false,
- past_due: false,
- submission_count: 0,
- },
- // issuer_evidence: null,
- metadata: [],
- payment_intent: 'pi_1',
- reason: 'fraudulent',
- status: 'needs_response',
- } as Dispute,
- currency: 'usd',
- type: 'charge',
- status: 'succeeded',
- paid: true,
- captured: true,
- balance_transaction: {
- amount: 2000,
- currency: 'usd',
- fee: 70,
- },
- refunds: {
- data: [],
- },
- order: {
- number: 45981,
- url: 'https://somerandomorderurl.com/?edit_order=45981',
- },
- billing_details: {
- name: 'Customer name',
- },
- payment_method_details: {
- card: {
- brand: 'visa',
- last4: '4242',
- },
- type: 'card',
- },
- outcome: {
- risk_level: 'normal',
- },
- } as any );
-
-describe( 'DisputeDetails', () => {
- beforeEach( () => {
- // mock Date.now that moment library uses to get current date for testing purposes
- Date.now = jest.fn( () =>
- new Date( '2023-09-08T12:33:37.000Z' ).getTime()
- );
- } );
- afterEach( () => {
- // roll it back
- Date.now = () => new Date().getTime();
- } );
- test( 'correctly renders dispute details', () => {
- const charge = getBaseCharge();
- render( - Fee: + Fees: -$0.00
diff --git a/client/payment-details/payment-method/affirm/index.js b/client/payment-details/payment-method/affirm/index.js new file mode 100644 index 00000000000..b53a55a0168 --- /dev/null +++ b/client/payment-details/payment-method/affirm/index.js @@ -0,0 +1,91 @@ +/** @format **/ + +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies. + */ +import Detail from '../detail'; + +/** + * Extracts and formats payment method details from a charge. + * + * @param {Object} charge The charge object. + * @return {Object} A flat hash of all necessary values. + */ +const formatPaymentMethodDetails = ( charge ) => { + const { billing_details: billingDetails, payment_method: id } = charge; + + const { name, email, formatted_address: formattedAddress } = billingDetails; + + return { + id, + name, + email, + formattedAddress, + }; +}; + +/** + * Placeholders to display while loading. + */ +const paymentMethodPlaceholders = { + id: 'id placeholder', + name: 'name placeholder', + email: 'email placeholder', + formattedAddress: 'address placeholder', +}; + +const CardDetails = ( { charge = {}, isLoading } ) => { + const details = + charge && charge.payment_method_details + ? formatPaymentMethodDetails( charge ) + : paymentMethodPlaceholders; + + const { id, name, email, formattedAddress } = details; + + return ( +
+
+ );
+};
+
+export default CardDetails;
diff --git a/client/payment-details/payment-method/afterpay-clearpay/index.js b/client/payment-details/payment-method/afterpay-clearpay/index.js
new file mode 100644
index 00000000000..99b6f20dc26
--- /dev/null
+++ b/client/payment-details/payment-method/afterpay-clearpay/index.js
@@ -0,0 +1,90 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import Detail from '../detail';
+
+/**
+ * Extracts and formats payment method details from a charge.
+ *
+ * @param {Object} charge The charge object.
+ * @return {Object} A flat hash of all necessary values.
+ */
+const formatPaymentMethodDetails = ( charge ) => {
+ const { billing_details: billingDetails, payment_method: id } = charge;
+
+ const { name, email, formatted_address: formattedAddress } = billingDetails;
+
+ return {
+ id,
+ name,
+ email,
+ formattedAddress,
+ };
+};
+
+/**
+ * Placeholders to display while loading.
+ */
+const paymentMethodPlaceholders = {
+ id: 'id placeholder',
+ name: 'name placeholder',
+ email: 'email placeholder',
+ formattedAddress: 'address placeholder',
+};
+
+const CardDetails = ( { charge = {}, isLoading } ) => {
+ const details =
+ charge && charge.payment_method_details
+ ? formatPaymentMethodDetails( charge )
+ : paymentMethodPlaceholders;
+
+ const { id, name, email, formattedAddress } = details;
+
+ return (
+
+
+ { !! id ? id : '–' }
+
+
+
+
+
+ { name || '–' }
+
+
+
+ { email || '–' }
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CardDetails;
diff --git a/client/payment-details/payment-method/card/index.js b/client/payment-details/payment-method/card/index.js
index 718e536e092..15893f0e299 100644
--- a/client/payment-details/payment-method/card/index.js
+++ b/client/payment-details/payment-method/card/index.js
@@ -52,7 +52,9 @@ const formatPaymentMethodDetails = ( charge ) => {
? sprintf(
// Translators: %1$s card brand, %2$s card funding (prepaid, credit, etc.).
__( '%1$s %2$s card', 'woocommerce-payments' ),
- network.charAt( 0 ).toUpperCase() + network.slice( 1 ), // Brand
+ network === 'jcb'
+ ? network.toUpperCase()
+ : network.charAt( 0 ).toUpperCase() + network.slice( 1 ), // Brand
fundingTypes[ funding ]
)
: undefined;
diff --git a/client/payment-details/payment-method/index.js b/client/payment-details/payment-method/index.js
index 11fde70c853..984ab87772b 100644
--- a/client/payment-details/payment-method/index.js
+++ b/client/payment-details/payment-method/index.js
@@ -3,32 +3,38 @@
/**
* External dependencies
*/
-import { __ } from '@wordpress/i18n';
import { Card, CardBody, CardHeader } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies.
*/
import Loadable from 'components/loadable';
-import CardDetails from './card';
-import CardPresentDetails from './card-present';
+import AffirmDetails from './affirm';
+import AfterpayClearpayDetails from './afterpay-clearpay';
import BancontactDetails from './bancontact';
import BecsDetails from './becs';
+import CardDetails from './card';
+import CardPresentDetails from './card-present';
import EpsDetails from './eps';
import GiropayDetails from './giropay';
import IdealDetails from './ideal';
+import KlarnaDetails from './klarna';
import P24Details from './p24';
import SepaDetails from './sepa';
import SofortDetails from './sofort';
const detailsComponentMap = {
- card: CardDetails,
- card_present: CardPresentDetails,
+ affirm: AffirmDetails,
+ afterpay_clearpay: AfterpayClearpayDetails,
au_becs_debit: BecsDetails,
bancontact: BancontactDetails,
+ card: CardDetails,
+ card_present: CardPresentDetails,
eps: EpsDetails,
giropay: GiropayDetails,
ideal: IdealDetails,
+ klarna: KlarnaDetails,
p24: P24Details,
sepa_debit: SepaDetails,
sofort: SofortDetails,
diff --git a/client/payment-details/payment-method/klarna/index.js b/client/payment-details/payment-method/klarna/index.js
new file mode 100644
index 00000000000..0f580f036c5
--- /dev/null
+++ b/client/payment-details/payment-method/klarna/index.js
@@ -0,0 +1,131 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import Detail from '../detail';
+
+/**
+ * Extracts and formats payment method details from a charge.
+ *
+ * @param {Object} charge The charge object.
+ * @return {Object} A flat hash of all necessary values.
+ */
+const formatPaymentMethodDetails = ( charge ) => {
+ const { billing_details: billingDetails, payment_method: id } = charge;
+
+ const {
+ payment_method_category: paymentMethodCategory,
+ preferred_locale: preferredLocale,
+ } = charge.payment_method_details.klarna;
+
+ const paymentMethodCategoryTranslations = {
+ pay_later: __( 'pay_later', 'woocommerce-payments' ),
+ pay_now: __( 'pay_now', 'woocommerce-payments' ),
+ pay_with_financing: __( 'pay_with_financing', 'woocommerce-payments' ),
+ pay_in_installments: __(
+ 'pay_in_installments',
+ 'woocommerce-payments'
+ ),
+ };
+
+ const { name, email, formatted_address: formattedAddress } = billingDetails;
+
+ return {
+ id,
+ name,
+ email,
+ formattedAddress,
+ paymentMethodCategory:
+ paymentMethodCategoryTranslations[ paymentMethodCategory ],
+ preferredLocale,
+ };
+};
+
+/**
+ * Placeholders to display while loading.
+ */
+const paymentMethodPlaceholders = {
+ id: 'id placeholder',
+ name: 'name placeholder',
+ email: 'email placeholder',
+ formattedAddress: 'address placeholder',
+ paymentMethodCategory: 'category placeholder',
+ preferredLocale: 'locale placeholder',
+};
+
+const KlarnaDetails = ( { charge = {}, isLoading } ) => {
+ const details = charge.payment_method_details
+ ? formatPaymentMethodDetails( charge )
+ : paymentMethodPlaceholders;
+
+ const {
+ id,
+ name,
+ email,
+ formattedAddress,
+ paymentMethodCategory,
+ preferredLocale,
+ } = details;
+
+ return (
+
+
+ { !! id ? id : '–' }
+
+
+
+
+ { name || '–' }
+
+
+
+ { email || '–' }
+
+
+
+
+
+
+
+
+ );
+};
+
+export default KlarnaDetails;
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index e75f69f2caf..a5ebb9ebf5d 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -5,10 +5,17 @@
*/
import { __ } from '@wordpress/i18n';
import { dateI18n } from '@wordpress/date';
-import { Card, CardBody, CardFooter, CardDivider } from '@wordpress/components';
+import {
+ Card,
+ CardBody,
+ CardFooter,
+ CardDivider,
+ Flex,
+} from '@wordpress/components';
import moment from 'moment';
import React, { useContext } from 'react';
import { createInterpolateElement } from '@wordpress/element';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
/**
* Internal dependencies.
@@ -28,6 +35,12 @@ import riskMappings from 'components/risk-level/strings';
import OrderLink from 'components/order-link';
import { formatCurrency, formatExplicitCurrency } from 'utils/currency';
import CustomerLink from 'components/customer-link';
+import { ClickTooltip } from 'components/tooltip';
+import DisputeStatusChip from 'components/dispute-status-chip';
+import {
+ getDisputeFeeFormatted,
+ isAwaitingResponse,
+} from 'wcpay/disputes/utils';
import { useAuthorization } from 'wcpay/data';
import CaptureAuthorizationButton from 'wcpay/components/capture-authorization-button';
import './style.scss';
@@ -37,7 +50,9 @@ import WCPaySettingsContext from '../../settings/wcpay-settings-context';
import { FraudOutcome } from '../../types/fraud-outcome';
import CancelAuthorizationButton from '../../components/cancel-authorization-button';
import { PaymentIntent } from '../../types/payment-intents';
-import DisputeDetails from '../dispute-details';
+import DisputeAwaitingResponseDetails from '../dispute-details/dispute-awaiting-response-details';
+import DisputeResolutionFooter from '../dispute-details/dispute-resolution-footer';
+import ErrorBoundary from 'components/error-boundary';
declare const window: any;
@@ -154,10 +169,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.
@@ -177,6 +189,20 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
const isFraudOutcomeReview = isOnHoldByFraudTools( charge, paymentIntent );
+ const disputeFee =
+ charge.dispute && getDisputeFeeFormatted( charge.dispute );
+
+ // Use the balance_transaction fee if available. If not (e.g. authorized but not captured), use the application_fee_amount.
+ const transactionFee = charge.balance_transaction
+ ? {
+ fee: charge.balance_transaction.fee,
+ currency: charge.balance_transaction.currency,
+ }
+ : {
+ fee: charge.application_fee_amount,
+ currency: charge.currency,
+ };
+
// WP translation strings are injected into Moment.js for relative time terms, since Moment's own translation library increases the bundle size significantly.
moment.updateLocale( 'en', {
relativeTime: {
@@ -209,12 +235,23 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
{ charge.currency || 'USD' }
-
+
+ { id }
+
+
+
+ { paymentMethodCategory }
+
+
+
+ { preferredLocale }
+
+
+
+
+
+ { name }
+
+
+
+ { email }
+
+
+
+
+
+
+
@@ -228,10 +265,17 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
) : null }
{ balance.refunded ? (
+ { isAwaitingResponse( charge.dispute.status ) ? (
+
) }
+
{ isAuthAndCaptureEnabled &&
authorization &&
! authorization.captured && (
diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss
index 7f15b50bfe0..cbe0450fb1e 100755
--- a/client/payment-details/summary/style.scss
+++ b/client/payment-details/summary/style.scss
@@ -37,13 +37,35 @@
.payment-details-summary__breakdown {
p {
@include font-size( 14 );
- color: $gray-50;
- display: inline-block;
+ color: $gray-700;
+ display: inline-flex;
margin: 0.25rem 1rem 0 0;
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: 12px;
}
p:last-child {
margin-right: 0;
}
+
+ &__fee-tooltip {
+ display: flex;
+ flex-direction: column;
+ padding: $grid-unit-15;
+ gap: $grid-unit-10;
+ font-weight: 400;
+ font-size: 14px;
+
+ & > *:last-child {
+ padding-top: $grid-unit-10;
+ border-top: 1px solid $gray-200;
+ }
+
+ label {
+ margin-right: $grid-unit-20;
+ color: $gray-700;
+ }
+ }
}
.payment-details-summary__fraud-outcome-action {
diff --git a/client/payment-details/summary/test/__snapshots__/index.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
similarity index 96%
rename from client/payment-details/summary/test/__snapshots__/index.tsx.snap
rename to client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
index 9dd86ba7c81..4a3bcae9a5c 100644
--- a/client/payment-details/summary/test/__snapshots__/index.tsx.snap
+++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
>
`;
-exports[`PaymentDetailsSummary renders the information of a disputed charge 1`] = `
+exports[`PaymentDetailsSummary renders the information of a dispute-reversal charge 1`] = `
- { `${ __(
- 'Refunded',
- 'woocommerce-payments'
- ) }: ` }
+ { `${
+ disputeFee
+ ? __(
+ 'Deducted',
+ 'woocommerce-payments'
+ )
+ : __(
+ 'Refunded',
+ 'woocommerce-payments'
+ )
+ }: ` }
{ formatExplicitCurrency(
-balance.refunded,
balance.currency
@@ -246,13 +290,66 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
placeholder="Fee amount"
>
{ `${ __(
- 'Fee',
+ 'Fees',
'woocommerce-payments'
) }: ` }
{ formatCurrency(
-balance.fee,
balance.currency
) }
+ { disputeFee && (
+
- Fee: + Fees: $-0.70
@@ -144,7 +144,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca > Customer name @@ -265,7 +265,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca this charge within the next 7 days @@ -342,7 +342,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th >- Fee: + Fees: $-0.70
@@ -461,7 +461,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th > Customer name @@ -582,7 +582,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th this charge within the next 7 days @@ -650,7 +650,7 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = ` >- Fee: + Fees: $-0.70
@@ -753,7 +753,7 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = ` > Customer name @@ -910,7 +910,7 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = ` >- Fee: + Fees: $-0.70
@@ -1013,7 +1013,7 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = ` > Customer name @@ -1200,7 +1200,7 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1 $-20.00- Fee: + Fees: $-0.70
@@ -1303,7 +1303,7 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1 > Customer name @@ -1458,7 +1458,7 @@ exports[`PaymentDetailsSummary renders loading state 1`] = ` >- Fee: + Fees: $0.00
@@ -1696,7 +1696,7 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char $-12.00- Fee: + Fees: $-0.70
@@ -1799,7 +1799,7 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char > Customer name @@ -1956,7 +1956,7 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`] >- Fee: + Fees: $-0.70
@@ -2059,7 +2059,7 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`] > Customer name @@ -2175,7 +2175,7 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`]
- Disputed: Under review
+ Disputed: Won
@@ -2322,7 +2319,7 @@ exports[`PaymentDetailsSummary renders the information of a disputed charge 1`]
>
Customer name
@@ -2421,6 +2418,50 @@ exports[`PaymentDetailsSummary renders the information of a disputed charge 1`]
+
- Refunded: - $-15.00 -
-- Fee: - $-15.70 + Fees: + $-0.70
Net: - $-10.70 + $19.30
-
-
- View dispute
-
-
-
+ />
,
},
Object {
- "body": Array [
-
- View dispute
- ,
- ],
+ "body": Array [],
"date": 2020-04-02T02:06:14.000Z,
"headline": "Payment disputed as Transaction unauthorized.",
"icon": + { sprintf( + /** translators: %s is the capability label. */ + __( + 'Choosing to continue will remove the option to accept %s cards from your customers. ' + + 'The option to enable %s will not appear again.', + 'woocommerce-payments' + ), + label, + label + ) } +
+
+
+`;
diff --git a/client/payment-methods/capability-request/test/dismiss-modal.test.js b/client/payment-methods/capability-request/test/dismiss-modal.test.js
new file mode 100644
index 00000000000..280a799e82f
--- /dev/null
+++ b/client/payment-methods/capability-request/test/dismiss-modal.test.js
@@ -0,0 +1,36 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import DismissConfirmationModal from '../capability-request-dismiss-modal';
+
+describe( 'DismissConfirmationModal', () => {
+ it( 'calls the onClose handler on cancel', async () => {
+ const handleCloseMock = jest.fn();
+ render(
+
+
+
+
+
+
+
+
+ Enable JCB for your customers, the only international payment brand based in Japan.
+
+
+
+
+