Net:
$19.30
@@ -2886,12 +2874,10 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = `
`;
-exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata with android TAP_TO_PAY_DEVICE 1`] = `
+exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata with ios COTS_DEVICE 1`] = `
.emotion-0 {
background-color: #fff;
color: #1e1e1e;
@@ -4899,12 +4878,10 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata with
@@ -5394,12 +5371,10 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
-
Fees:
-$0.70
-
Net:
$19.30
diff --git a/client/payment-details/summary/__tests__/index.test.js b/client/payment-details/summary/__tests__/index.test.js
index 255c6a7585d..b824527063b 100755
--- a/client/payment-details/summary/__tests__/index.test.js
+++ b/client/payment-details/summary/__tests__/index.test.js
@@ -2,7 +2,7 @@
/**
* External dependencies
*/
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen, within, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import moment from 'moment';
@@ -12,8 +12,7 @@ import moment from 'moment';
*/
import PaymentDetailsSummary from '../';
import { useAuthorization } from 'wcpay/data';
-import { paymentIntentMock } from 'wcpay/data/payment-intents/test/hooks';
-import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
+import { paymentIntentMock } from 'wcpay/data/payment-intents/__tests__/hooks.test';
// Mock dateI18n
jest.mock( '@wordpress/date', () => ( {
@@ -139,14 +138,12 @@ const createTapToPayMetadata = ( readerModel, platform ) => ( {
function renderCharge( charge, metadata = {}, isLoading = false, props = {} ) {
const { container } = render(
-
-
-
+
);
return container;
}
@@ -173,9 +170,6 @@ describe( 'PaymentDetailsSummary', () => {
connect: {
country: 'US',
},
- featureFlags: {
- isAuthAndCaptureEnabled: true,
- },
currencyData: {
US: {
code: 'USD',
@@ -196,6 +190,9 @@ describe( 'PaymentDetailsSummary', () => {
},
dateFormat: 'M j, Y',
timeFormat: 'g:ia',
+ featureFlags: {
+ isDisputeIssuerEvidenceEnabled: false,
+ },
};
// mock Date.now that moment library uses to get current date for testing purposes
@@ -376,10 +373,16 @@ describe( 'PaymentDetailsSummary', () => {
).not.toBeInTheDocument();
expect(
- screen.getByText(
- /Approving this transaction will capture the charge./
- )
- ).toBeInTheDocument();
+ screen.getAllByText( ( content, element ) => {
+ return (
+ element.textContent.includes( 'You must' ) &&
+ element.textContent.includes( 'capture' ) &&
+ element.textContent.includes(
+ 'this charge within the next'
+ )
+ );
+ } ).length
+ ).toBeGreaterThan( 0 );
expect( container ).toMatchSnapshot();
} );
@@ -526,7 +529,7 @@ describe( 'PaymentDetailsSummary', () => {
expect( container ).toMatchSnapshot();
} );
- test( 'renders the fee breakdown tooltip of a disputed charge', () => {
+ test( 'renders the fee breakdown tooltip of a disputed charge', async () => {
const charge = {
...getBaseCharge(),
currency: 'jpy',
@@ -558,7 +561,7 @@ describe( 'PaymentDetailsSummary', () => {
const tooltipButton = screen.getByRole( 'button', {
name: /Fee breakdown/i,
} );
- userEvent.click( tooltipButton );
+ await userEvent.click( tooltipButton );
// Check fee breakdown calculated correctly
const tooltipContent = screen.getByRole( 'tooltip' );
@@ -633,7 +636,7 @@ describe( 'PaymentDetailsSummary', () => {
} );
} );
- test( 'correctly renders the accept dispute modal and accepts', () => {
+ test( 'correctly renders the accept dispute modal and accepts', async () => {
const charge = getBaseCharge();
charge.disputed = true;
charge.dispute = getBaseDispute();
@@ -646,7 +649,7 @@ describe( 'PaymentDetailsSummary', () => {
} );
// Open the modal
- openModalButton.click();
+ await userEvent.click( openModalButton );
screen.getByRole( 'heading', {
name: /Accept the dispute?/,
@@ -663,7 +666,7 @@ describe( 'PaymentDetailsSummary', () => {
} );
// Accept the dispute
- acceptButton.click();
+ await userEvent.click( acceptButton );
expect( mockDisputeDoAccept ).toHaveBeenCalledTimes( 1 );
} );
@@ -681,9 +684,9 @@ describe( 'PaymentDetailsSummary', () => {
name: /Challenge dispute/,
} );
- challengeButton.click();
-
- expect( window.location.href ).toContain(
+ const challengeLink = challengeButton.closest( 'a' );
+ expect( challengeLink ).toHaveAttribute(
+ 'href',
`admin.php?page=wc-admin&path=%2Fpayments%2Fdisputes%2Fchallenge&id=${ charge.dispute.id }`
);
} );
@@ -995,9 +998,13 @@ describe( 'PaymentDetailsSummary', () => {
expect( screen.getByText( 'Refund in full' ) ).toBeInTheDocument();
} );
- test( 'Refund in full option is not available when an amount has been refunded', () => {
- renderCharge( { ...getBaseCharge(), amount_refunded: 42 } );
- fireEvent.click( screen.getByLabelText( 'Transaction actions' ) );
+ test( 'Refund in full option is not available when an amount has been refunded', async () => {
+ await act( async () => {
+ renderCharge( { ...getBaseCharge(), amount_refunded: 42 } );
+ } );
+ await userEvent.click(
+ screen.getByLabelText( 'Transaction actions' )
+ );
expect(
screen.queryByText( 'Refund in full' )
).not.toBeInTheDocument();
@@ -1009,8 +1016,10 @@ describe( 'PaymentDetailsSummary', () => {
expect( screen.getByText( 'Partial refund' ) ).toBeInTheDocument();
} );
- test( 'Refund control menu is not visible when charge is not captured', () => {
- renderCharge( { ...getBaseCharge(), captured: false } );
+ test( 'Refund control menu is not visible when charge is not captured', async () => {
+ await act( async () => {
+ renderCharge( { ...getBaseCharge(), captured: false } );
+ } );
expect(
screen.queryByLabelText( 'Transaction actions' )
).not.toBeInTheDocument();
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index d02076fe599..a2170a22040 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -6,22 +6,24 @@
import { __ } from '@wordpress/i18n';
import { moreVertical } from '@wordpress/icons';
import moment from 'moment';
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
import { createInterpolateElement } from '@wordpress/element';
import HelpOutlineIcon from 'gridicons/dist/help-outline';
import _ from 'lodash';
+import {
+ CardDivider,
+ DropdownMenu,
+ MenuGroup,
+ MenuItem,
+ Card,
+ CardBody,
+ Flex,
+ ExternalLink,
+} from '@wordpress/components';
/**
* Internal dependencies.
*/
-import { CardDivider } from 'wcpay/components/wp-components-wrapped/components/card-divider';
-import { DropdownMenu } from 'wcpay/components/wp-components-wrapped/components/dropdown-menu';
-import { MenuGroup } from 'wcpay/components/wp-components-wrapped/components/menu-group';
-import { MenuItem } from 'wcpay/components/wp-components-wrapped/components/menu-item';
-import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
-import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
-import { Flex } from 'wcpay/components/wp-components-wrapped/components/flex';
-import { CardNotice } from 'wcpay/components/wp-components-wrapped/components/card-notice';
import {
getChargeAmounts,
getChargeStatus,
@@ -29,6 +31,7 @@ import {
isOnHoldByFraudTools,
getBankName,
} from 'utils/charge';
+import CardNotice from 'wcpay/components/card-notice';
import isValueTruthy from 'utils/is-value-truthy';
import PaymentStatusChip from 'components/payment-status-chip';
import PaymentMethodDetails from 'components/payment-method-details';
@@ -66,7 +69,6 @@ import {
formatDateTimeFromString,
formatDateTimeFromTimestamp,
} from 'wcpay/utils/date-time';
-import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
declare const window: any;
@@ -238,18 +240,13 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
const renderStorePrice =
charge.currency && balance.currency !== charge.currency;
- const {
- 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.
// We also need to exclude failed payments and payments that have been refunded, because capture === false in those cases, even
// if the capture is automatic.
const shouldFetchAuthorization =
! charge.captured &&
charge.status !== 'failed' &&
- charge.amount_refunded === 0 &&
- isAuthAndCaptureEnabled;
+ charge.amount_refunded === 0;
const { authorization } = useAuthorization(
charge.payment_intent as string,
@@ -733,71 +730,69 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
onButtonClick={ () => setIsRefundModalOpen( true ) }
/>
) }
- { isAuthAndCaptureEnabled &&
- authorization &&
- ! authorization.captured && (
-
- {
- recordEvent(
- 'payments_transactions_details_capture_charge_button_click',
- {
- payment_intent_id:
- charge.payment_intent,
- }
- );
- } }
- />
- ) : (
- <>
- )
+ { authorization && ! authorization.captured && (
+
+ {
+ recordEvent(
+ 'payments_transactions_details_capture_charge_button_click',
+ {
+ payment_intent_id:
+ charge.payment_intent,
+ }
+ );
+ } }
+ />
+ ) : (
+ <>
+ )
+ }
+ >
+ { createInterpolateElement(
+ __(
+ 'You must capture this charge within the next',
+ 'woocommerce-payments'
+ ),
+ {
+ a: (
+
+ ),
}
+ ) }{ ' ' }
+
- { createInterpolateElement(
- __(
- 'You must capture this charge within the next',
- 'woocommerce-payments'
- ),
- {
- a: (
-
- ),
- }
- ) }{ ' ' }
-
-
- { moment
- .utc( authorization.created )
- .add( 7, 'days' )
- .fromNow( true ) }
-
-
- { isFraudOutcomeReview &&
- `. ${ __(
- 'Approving this transaction will capture the charge.',
- 'woocommerce-payments'
- ) }` }
-
-
- ) }
+
+ { moment
+ .utc( authorization.created )
+ .add( 7, 'days' )
+ .fromNow( true ) }
+
+
+ { isFraudOutcomeReview &&
+ `. ${ __(
+ 'Approving this transaction will capture the charge.',
+ 'woocommerce-payments'
+ ) }` }
+
+
+ ) }
);
};
diff --git a/client/payment-details/summary/missing-order-notice/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/missing-order-notice/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from client/payment-details/summary/missing-order-notice/test/__snapshots__/index.test.tsx.snap
rename to client/payment-details/summary/missing-order-notice/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/client/payment-details/summary/missing-order-notice/test/index.test.tsx b/client/payment-details/summary/missing-order-notice/__tests__/index.test.tsx
similarity index 90%
rename from client/payment-details/summary/missing-order-notice/test/index.test.tsx
rename to client/payment-details/summary/missing-order-notice/__tests__/index.test.tsx
index 97758906fdc..5bc4fbec41e 100644
--- a/client/payment-details/summary/missing-order-notice/test/index.test.tsx
+++ b/client/payment-details/summary/missing-order-notice/__tests__/index.test.tsx
@@ -5,7 +5,7 @@
*/
import React from 'react';
import { render } from '@testing-library/react';
-import { chargeMock } from 'wcpay/data/payment-intents/test/hooks';
+import { chargeMock } from 'wcpay/data/payment-intents/__tests__/hooks.test';
/**
* Internal dependencies
diff --git a/client/payment-details/summary/missing-order-notice/index.tsx b/client/payment-details/summary/missing-order-notice/index.tsx
index d25d84bd376..9da14170bf8 100644
--- a/client/payment-details/summary/missing-order-notice/index.tsx
+++ b/client/payment-details/summary/missing-order-notice/index.tsx
@@ -5,7 +5,7 @@
*/
import React from 'react';
-import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
@@ -38,6 +38,7 @@ const MissingOrderNotice: React.FC< MissingOrderNoticeProps > = ( {
variant="primary"
isSmall={ false }
onClick={ onButtonClick }
+ __next40pxDefaultSize
>
{ __( 'Refund', 'woocommerce-payments' ) }
diff --git a/client/payment-details/summary/refund-modal/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/refund-modal/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from client/payment-details/summary/refund-modal/test/__snapshots__/index.test.tsx.snap
rename to client/payment-details/summary/refund-modal/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/client/payment-details/summary/refund-modal/test/index.test.tsx b/client/payment-details/summary/refund-modal/__tests__/index.test.tsx
similarity index 100%
rename from client/payment-details/summary/refund-modal/test/index.test.tsx
rename to client/payment-details/summary/refund-modal/__tests__/index.test.tsx
diff --git a/client/payment-details/summary/refund-modal/index.tsx b/client/payment-details/summary/refund-modal/index.tsx
index d82b46670ea..8cf09986547 100644
--- a/client/payment-details/summary/refund-modal/index.tsx
+++ b/client/payment-details/summary/refund-modal/index.tsx
@@ -4,8 +4,7 @@
* External dependencies
*/
import React from 'react';
-import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
-import { RadioControl } from 'wcpay/components/wp-components-wrapped/components/radio-control';
+import { Button, RadioControl } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import interpolateComponents from '@automattic/interpolate-components';
@@ -60,14 +59,19 @@ const RefundModal: React.FC< RefundModalProps > = ( {
title={ __( 'Refund transaction', 'woocommerce-payments' ) }
actions={
<>
-