= ( {
}
buttonLabel={ __(
- 'Learn more about sandbox mode',
+ 'Learn more about test accounts',
'woocommerce-payments'
) }
maxWidth={ '250px' }
diff --git a/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx b/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx
index c30aa5f53ec..d4b8c69c016 100644
--- a/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx
+++ b/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx
@@ -3,8 +3,9 @@
*/
import React, { useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
-import { addQueryArgs } from '@wordpress/url';
-import { Button, Modal } from '@wordpress/components';
+import { getAdminUrl } from 'utils';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
import { Icon, currencyDollar } from '@wordpress/icons';
/**
@@ -35,10 +36,12 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
source,
} );
- window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
- 'wcpay-disable-onboarding-test-mode': 'true',
- from,
- source: 'wcpay-setup-live-payments', // Overwrite any existing source because we are starting over.
+ window.location.href = getAdminUrl( {
+ page: 'wc-settings',
+ tab: 'checkout',
+ path: '/woopayments/onboarding',
+ source: 'wcpay-setup-live-payments',
+ from: from,
} );
};
diff --git a/client/components/sandbox-mode-switch-to-live-notice/modal/test/index.test.tsx b/client/components/sandbox-mode-switch-to-live-notice/modal/test/index.test.tsx
index e2341aaa3a5..82f89856bee 100644
--- a/client/components/sandbox-mode-switch-to-live-notice/modal/test/index.test.tsx
+++ b/client/components/sandbox-mode-switch-to-live-notice/modal/test/index.test.tsx
@@ -14,6 +14,16 @@ jest.mock( '@wordpress/data', () => ( {
useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),
} ) );
+// Mock the getAdminUrl utility to return an absolute URL
+jest.mock( 'utils', () => ( {
+ getAdminUrl: jest.fn(
+ ( args: Record< string, any > ) =>
+ `http://localhost/wp-admin/admin.php?${ new URLSearchParams(
+ args
+ ).toString() }`
+ ),
+} ) );
+
declare const global: {
wcpaySettings: {
connectUrl: string;
@@ -63,7 +73,7 @@ describe( 'Setup Live Payments Modal', () => {
);
expect( window.location.href ).toBe(
- `https://wcpay.test/connect?wcpay-disable-onboarding-test-mode=true&from=bogus&source=wcpay-setup-live-payments`
+ `http://localhost/wp-admin/admin.php?page=wc-settings&tab=checkout&path=%2Fwoopayments%2Fonboarding&source=wcpay-setup-live-payments&from=bogus`
);
} );
} );
diff --git a/client/components/stepper/stepper-panel.tsx b/client/components/stepper/stepper-panel.tsx
index f509b76a929..e528d54b6e6 100644
--- a/client/components/stepper/stepper-panel.tsx
+++ b/client/components/stepper/stepper-panel.tsx
@@ -7,7 +7,7 @@ import { check } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import { Icon } from 'wcpay/components/wp-components-wrapped';
+import { Icon } from 'wcpay/components/wp-components-wrapped/components/icon';
import './style.scss';
import clsx from 'clsx';
diff --git a/client/components/stepper/test/stepper-panel.test.tsx b/client/components/stepper/test/stepper-panel.test.tsx
index d0064776b69..37c50708a07 100644
--- a/client/components/stepper/test/stepper-panel.test.tsx
+++ b/client/components/stepper/test/stepper-panel.test.tsx
@@ -10,7 +10,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
import { StepperPanel } from '../stepper-panel';
// Mock the Icon component to avoid dependency on WordPress icons
-jest.mock( 'wcpay/components/wp-components-wrapped', () => ( {
+jest.mock( 'wcpay/components/wp-components-wrapped/components/icon', () => ( {
Icon: ( { size }: { size: number } ) => (
icon-{ size }
),
diff --git a/client/components/tooltip/index.tsx b/client/components/tooltip/index.tsx
index 7a16e011955..0c6b95a0fa4 100644
--- a/client/components/tooltip/index.tsx
+++ b/client/components/tooltip/index.tsx
@@ -4,11 +4,13 @@
import React, { useState, useRef } from 'react';
import clsx from 'clsx';
import { noop } from 'lodash';
-import { Icon } from '@wordpress/components';
+// eslint-disable-next-line no-restricted-syntax
+import type { Icon as IconType } from '@wordpress/components';
/**
* Internal dependencies
*/
+import { Icon } from 'wcpay/components/wp-components-wrapped/components/icon';
import TooltipBase, { TooltipBaseProps } from './tooltip-base';
type TooltipProps = TooltipBaseProps & {
@@ -17,7 +19,7 @@ type TooltipProps = TooltipBaseProps & {
/**
* An icon that will be used as the tooltip button. Replaces the component children.
*/
- buttonIcon?: Icon.IconType< unknown >;
+ buttonIcon?: IconType.IconType< unknown >;
/**
* A label for the tooltip button, visible to screen readers.
*/
diff --git a/client/components/welcome/index.tsx b/client/components/welcome/index.tsx
index 20ef939a4bf..4a3778288b0 100644
--- a/client/components/welcome/index.tsx
+++ b/client/components/welcome/index.tsx
@@ -2,7 +2,6 @@
* External dependencies
*/
import React from 'react';
-import { CardHeader, Flex, FlexItem } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
/**
@@ -11,6 +10,9 @@ import { __, sprintf } from '@wordpress/i18n';
import { useAllDepositsOverviews } from 'data';
import { useCurrentWpUser } from './hooks';
import { CurrencySelect } from './currency-select';
+import { CardHeader } from 'wcpay/components/wp-components-wrapped/components/card-header';
+import { Flex } from 'wcpay/components/wp-components-wrapped/components/flex';
+import { FlexItem } from 'wcpay/components/wp-components-wrapped/components/flex-item';
import './style.scss';
type TimeOfDay = 'morning' | 'afternoon' | 'evening';
diff --git a/client/components/wp-components-wrapped/components/base-control.tsx b/client/components/wp-components-wrapped/components/base-control.tsx
new file mode 100644
index 00000000000..474f07e1a7e
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/base-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { BaseControl as BundledBaseControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const BaseControl = makeWrappedComponent(
+ BundledBaseControl,
+ 'BaseControl'
+);
diff --git a/client/components/wp-components-wrapped/components/button.tsx b/client/components/wp-components-wrapped/components/button.tsx
new file mode 100644
index 00000000000..f355502b9e2
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/button.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Button as BundledButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Button = makeWrappedComponent( BundledButton, 'Button' );
diff --git a/client/components/wp-components-wrapped/components/card-body.tsx b/client/components/wp-components-wrapped/components/card-body.tsx
new file mode 100644
index 00000000000..ab076ba5870
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/card-body.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { CardBody as BundledCardBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const CardBody = makeWrappedComponent( BundledCardBody, 'CardBody' );
diff --git a/client/components/wp-components-wrapped/components/card-divider.tsx b/client/components/wp-components-wrapped/components/card-divider.tsx
new file mode 100644
index 00000000000..bcdc828d6b1
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/card-divider.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { CardDivider as BundledCardDivider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const CardDivider = makeWrappedComponent(
+ BundledCardDivider,
+ 'CardDivider'
+);
diff --git a/client/components/wp-components-wrapped/components/card-footer.tsx b/client/components/wp-components-wrapped/components/card-footer.tsx
new file mode 100644
index 00000000000..13950bcbeee
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/card-footer.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { CardFooter as BundledCardFooter } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const CardFooter = makeWrappedComponent(
+ BundledCardFooter,
+ 'CardFooter'
+);
diff --git a/client/components/wp-components-wrapped/components/card-header.tsx b/client/components/wp-components-wrapped/components/card-header.tsx
new file mode 100644
index 00000000000..2afc25159fb
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/card-header.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { CardHeader as BundledCardHeader } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const CardHeader = makeWrappedComponent(
+ BundledCardHeader,
+ 'CardHeader'
+);
diff --git a/client/components/wp-components-wrapped/components/card-notice.tsx b/client/components/wp-components-wrapped/components/card-notice.tsx
new file mode 100644
index 00000000000..99c1efe7017
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/card-notice.tsx
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import BundledCardNotice from 'wcpay/components/card-notice';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const CardNotice = makeWrappedComponent(
+ BundledCardNotice,
+ 'CardNotice'
+);
diff --git a/client/components/wp-components-wrapped/components/card.tsx b/client/components/wp-components-wrapped/components/card.tsx
new file mode 100644
index 00000000000..11cb372153d
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/card.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Card as BundledCard } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Card = makeWrappedComponent( BundledCard, 'Card' );
diff --git a/client/components/wp-components-wrapped/components/checkbox-control.tsx b/client/components/wp-components-wrapped/components/checkbox-control.tsx
new file mode 100644
index 00000000000..be7c7843520
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/checkbox-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { CheckboxControl as BundledCheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const CheckboxControl = makeWrappedComponent(
+ BundledCheckboxControl,
+ 'CheckboxControl'
+);
diff --git a/client/components/wp-components-wrapped/components/drop-zone.tsx b/client/components/wp-components-wrapped/components/drop-zone.tsx
new file mode 100644
index 00000000000..0acc25b6eba
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/drop-zone.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { DropZone as BundledDropZone } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const DropZone = makeWrappedComponent( BundledDropZone, 'DropZone' );
diff --git a/client/components/wp-components-wrapped/components/dropdown-menu.tsx b/client/components/wp-components-wrapped/components/dropdown-menu.tsx
new file mode 100644
index 00000000000..aa6f2617aa6
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/dropdown-menu.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { DropdownMenu as BundledDropdownMenu } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const DropdownMenu = makeWrappedComponent(
+ BundledDropdownMenu,
+ 'DropdownMenu'
+);
diff --git a/client/components/wp-components-wrapped/components/external-link.tsx b/client/components/wp-components-wrapped/components/external-link.tsx
new file mode 100644
index 00000000000..91cf1a72c4c
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/external-link.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { ExternalLink as BundledExternalLink } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const ExternalLink = makeWrappedComponent(
+ BundledExternalLink,
+ 'ExternalLink'
+);
diff --git a/client/components/wp-components-wrapped/components/flex-block.tsx b/client/components/wp-components-wrapped/components/flex-block.tsx
new file mode 100644
index 00000000000..ab46575d3fd
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/flex-block.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { FlexBlock as BundledFlexBlock } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const FlexBlock = makeWrappedComponent( BundledFlexBlock, 'FlexBlock' );
diff --git a/client/components/wp-components-wrapped/components/flex-item.tsx b/client/components/wp-components-wrapped/components/flex-item.tsx
new file mode 100644
index 00000000000..30498ce14fe
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/flex-item.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { FlexItem as BundledFlexItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const FlexItem = makeWrappedComponent( BundledFlexItem, 'FlexItem' );
diff --git a/client/components/wp-components-wrapped/components/flex.tsx b/client/components/wp-components-wrapped/components/flex.tsx
new file mode 100644
index 00000000000..15c00e5f41c
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/flex.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Flex as BundledFlex } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Flex = makeWrappedComponent( BundledFlex, 'Flex' );
diff --git a/client/components/wp-components-wrapped/components/form-file-upload.tsx b/client/components/wp-components-wrapped/components/form-file-upload.tsx
new file mode 100644
index 00000000000..d7ab6a67e2c
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/form-file-upload.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { FormFileUpload as BundledFormFileUpload } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const FormFileUpload = makeWrappedComponent(
+ BundledFormFileUpload,
+ 'FormFileUpload'
+);
diff --git a/client/components/wp-components-wrapped/components/horizontal-rule.tsx b/client/components/wp-components-wrapped/components/horizontal-rule.tsx
new file mode 100644
index 00000000000..1d0da05246e
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/horizontal-rule.tsx
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { HorizontalRule as BundledHorizontalRule } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const HorizontalRule = makeWrappedComponent(
+ // @ts-expect-error: suppressing because of how the HorizontalRule component is defined, but it's no problem.
+ BundledHorizontalRule,
+ 'HorizontalRule'
+);
diff --git a/client/components/wp-components-wrapped/components/icon.tsx b/client/components/wp-components-wrapped/components/icon.tsx
new file mode 100644
index 00000000000..a0dc432f358
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/icon.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Icon as BundledIcon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Icon = makeWrappedComponent( BundledIcon, 'Icon' );
diff --git a/client/components/wp-components-wrapped/components/menu-group.tsx b/client/components/wp-components-wrapped/components/menu-group.tsx
new file mode 100644
index 00000000000..4d9e738941a
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/menu-group.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { MenuGroup as BundledMenuGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const MenuGroup = makeWrappedComponent( BundledMenuGroup, 'MenuGroup' );
diff --git a/client/components/wp-components-wrapped/components/menu-item.tsx b/client/components/wp-components-wrapped/components/menu-item.tsx
new file mode 100644
index 00000000000..1bd9aaca066
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/menu-item.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { MenuItem as BundledMenuItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const MenuItem = makeWrappedComponent( BundledMenuItem, 'MenuItem' );
diff --git a/client/components/wp-components-wrapped/components/modal.tsx b/client/components/wp-components-wrapped/components/modal.tsx
new file mode 100644
index 00000000000..8ab76df8673
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/modal.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Modal as BundledModal } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Modal = makeWrappedComponent( BundledModal, 'Modal' );
diff --git a/client/components/wp-components-wrapped/components/notice.tsx b/client/components/wp-components-wrapped/components/notice.tsx
new file mode 100644
index 00000000000..b1d6ea51e18
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/notice.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Notice as BundledNotice } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Notice = makeWrappedComponent( BundledNotice, 'Notice' );
diff --git a/client/components/wp-components-wrapped/components/number-control.tsx b/client/components/wp-components-wrapped/components/number-control.tsx
new file mode 100644
index 00000000000..448225ccb71
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/number-control.tsx
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+// @ts-expect-error: Suppressing Module '"@wordpress/components"' has no exported member '__experimentalText'.
+// eslint-disable-next-line @wordpress/no-unsafe-wp-apis, no-restricted-syntax
+import { __experimentalNumberControl as BundledExperimentalNumberControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const NumberControl = makeWrappedComponent(
+ BundledExperimentalNumberControl,
+ '__experimentalNumberControl'
+);
diff --git a/client/components/wp-components-wrapped/components/panel-body.tsx b/client/components/wp-components-wrapped/components/panel-body.tsx
new file mode 100644
index 00000000000..81664b1bb89
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/panel-body.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { PanelBody as BundledPanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const PanelBody = makeWrappedComponent( BundledPanelBody, 'PanelBody' );
diff --git a/client/components/wp-components-wrapped/components/panel.tsx b/client/components/wp-components-wrapped/components/panel.tsx
new file mode 100644
index 00000000000..e34b39796ab
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/panel.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Panel as BundledPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Panel = makeWrappedComponent( BundledPanel, 'Panel' );
diff --git a/client/components/wp-components-wrapped/components/popover.tsx b/client/components/wp-components-wrapped/components/popover.tsx
new file mode 100644
index 00000000000..435af8c9b9c
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/popover.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Popover as BundledPopover } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Popover = makeWrappedComponent( BundledPopover, 'Popover' );
diff --git a/client/components/wp-components-wrapped/components/radio-control.tsx b/client/components/wp-components-wrapped/components/radio-control.tsx
new file mode 100644
index 00000000000..beafa7bc8ec
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/radio-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { RadioControl as BundledRadioControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const RadioControl = makeWrappedComponent(
+ BundledRadioControl,
+ 'RadioControl'
+);
diff --git a/client/components/wp-components-wrapped/components/range-control.tsx b/client/components/wp-components-wrapped/components/range-control.tsx
new file mode 100644
index 00000000000..5a282739d18
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/range-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { RangeControl as BundledRangeControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const RangeControl = makeWrappedComponent(
+ BundledRangeControl,
+ 'RangeControl'
+);
diff --git a/client/components/wp-components-wrapped/components/search-control.tsx b/client/components/wp-components-wrapped/components/search-control.tsx
new file mode 100644
index 00000000000..e69ca6a0048
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/search-control.tsx
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+// @ts-expect-error: Suppressing Module '"@wordpress/components"' has no exported member 'SearchControl'.
+// eslint-disable-next-line no-restricted-syntax
+import { SearchControl as BundledSearchControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const SearchControl = makeWrappedComponent(
+ BundledSearchControl,
+ 'SearchControl'
+);
diff --git a/client/components/wp-components-wrapped/components/select-control.tsx b/client/components/wp-components-wrapped/components/select-control.tsx
new file mode 100644
index 00000000000..7b609aee0c4
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/select-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { SelectControl as BundledSelectControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const SelectControl = makeWrappedComponent(
+ BundledSelectControl,
+ 'SelectControl'
+);
diff --git a/client/components/wp-components-wrapped/components/snackbar-list.tsx b/client/components/wp-components-wrapped/components/snackbar-list.tsx
new file mode 100644
index 00000000000..8ab57cc5e07
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/snackbar-list.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { SnackbarList as BundledSnackbarList } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const SnackbarList = makeWrappedComponent(
+ BundledSnackbarList,
+ 'SnackbarList'
+);
diff --git a/client/components/wp-components-wrapped/components/spinner.tsx b/client/components/wp-components-wrapped/components/spinner.tsx
new file mode 100644
index 00000000000..90edb8784ab
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/spinner.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Spinner as BundledSpinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Spinner = makeWrappedComponent( BundledSpinner, 'Spinner' );
diff --git a/client/components/wp-components-wrapped/components/tab-panel.tsx b/client/components/wp-components-wrapped/components/tab-panel.tsx
new file mode 100644
index 00000000000..c6053857987
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/tab-panel.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { TabPanel as BundledTabPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const TabPanel = makeWrappedComponent( BundledTabPanel, 'TabPanel' );
diff --git a/client/components/wp-components-wrapped/components/text-control.tsx b/client/components/wp-components-wrapped/components/text-control.tsx
new file mode 100644
index 00000000000..ae1caa80bd8
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/text-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { TextControl as BundledTextControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const TextControl = makeWrappedComponent(
+ BundledTextControl,
+ 'TextControl'
+);
diff --git a/client/components/wp-components-wrapped/components/text.tsx b/client/components/wp-components-wrapped/components/text.tsx
new file mode 100644
index 00000000000..84128f21977
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/text.tsx
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+// @ts-expect-error: Suppressing Module '"@wordpress/components"' has no exported member '__experimentalText'.
+// eslint-disable-next-line @wordpress/no-unsafe-wp-apis, no-restricted-syntax
+import { __experimentalText as BundledExperimentalText } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Text = makeWrappedComponent(
+ BundledExperimentalText,
+ '__experimentalText'
+);
diff --git a/client/components/wp-components-wrapped/components/textarea-control.tsx b/client/components/wp-components-wrapped/components/textarea-control.tsx
new file mode 100644
index 00000000000..faa25de3bee
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/textarea-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { TextareaControl as BundledTextareaControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const TextareaControl = makeWrappedComponent(
+ BundledTextareaControl,
+ 'TextareaControl'
+);
diff --git a/client/components/wp-components-wrapped/components/toggle-control.tsx b/client/components/wp-components-wrapped/components/toggle-control.tsx
new file mode 100644
index 00000000000..6fe49956234
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/toggle-control.tsx
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { ToggleControl as BundledToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const ToggleControl = makeWrappedComponent(
+ BundledToggleControl,
+ 'ToggleControl'
+);
diff --git a/client/components/wp-components-wrapped/components/tooltip.tsx b/client/components/wp-components-wrapped/components/tooltip.tsx
new file mode 100644
index 00000000000..af12c03175d
--- /dev/null
+++ b/client/components/wp-components-wrapped/components/tooltip.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-syntax
+import { Tooltip as BundledTooltip } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { makeWrappedComponent } from '../make-wrapped-component';
+
+export const Tooltip = makeWrappedComponent( BundledTooltip, 'Tooltip' );
diff --git a/client/components/wp-components-wrapped/index.tsx b/client/components/wp-components-wrapped/index.tsx
index d5572a6f716..8e6836c6d2f 100644
--- a/client/components/wp-components-wrapped/index.tsx
+++ b/client/components/wp-components-wrapped/index.tsx
@@ -1,435 +1,37 @@
-/**
- * External dependencies
- */
-import React, { ComponentProps, useContext } from 'react';
-import {
- Card as BundledWordPressComponentsCard,
- CardBody as BundledWordPressComponentsCardBody,
- Button as BundledWordPressComponentsButton,
- PanelBody as BundledWordPressComponentsPanelBody,
- ExternalLink as BundledWordPressComponentsExternalLink,
- Flex as BundledWordPressComponentsFlex,
- FlexItem as BundledWordPressComponentsFlexItem,
- Icon as BundledWordPressComponentsIcon,
- Modal as BundledWordPressComponentsModal,
- HorizontalRule as BundledWordPressComponentsHorizontalRule,
- CardFooter as BundledWordPressComponentsCardFooter,
- CardHeader as BundledWordPressComponentsCardHeader,
- CardDivider as BundledWordPressComponentsCardDivider,
- DropdownMenu as BundledWordPressComponentsDropdownMenu,
- MenuGroup as BundledWordPressComponentsMenuGroup,
- MenuItem as BundledWordPressComponentsMenuItem,
- Notice as BundledWordPressComponentsNotice,
- SelectControl as BundledWordPressComponentsSelectControl,
- TextControl as BundledWordPressComponentsTextControl,
- TextareaControl as BundledWordPressComponentsTextareaControl,
- FormFileUpload as BundledWordPressComponentsFormFileUpload,
-} from '@wordpress/components';
-import BundledWordPressComponentsCardNotice from 'wcpay/components/card-notice';
-
-/**
- * Internal dependencies
- */
-import { WordPressComponentsContext } from 'wcpay/wordpress-components-context/context';
-
-const WrappedCard = (
- props: ComponentProps< typeof BundledWordPressComponentsCard > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { Card } = context;
-
- return
;
-};
-
-const WrappedCardBody = (
- props: ComponentProps< typeof BundledWordPressComponentsCardBody > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { CardBody } = context;
-
- return
;
-};
-
-const WrappedButton = (
- props: ComponentProps< typeof BundledWordPressComponentsButton > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { Button } = context;
-
- return
;
-};
-
-const WrappedPanelBody = (
- props: ComponentProps< typeof BundledWordPressComponentsPanelBody > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { PanelBody } = context;
-
- return
;
-};
-
-const WrappedExternalLink = (
- props: ComponentProps< typeof BundledWordPressComponentsExternalLink > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { ExternalLink } = context;
-
- return
;
-};
-
-const WrappedFlex = (
- props: ComponentProps< typeof BundledWordPressComponentsFlex > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { Flex } = context;
-
- return
;
-};
-
-const WrappedFlexItem = (
- props: ComponentProps< typeof BundledWordPressComponentsFlexItem > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { FlexItem } = context;
-
- return
;
-};
-
-const WrappedIcon = (
- props: ComponentProps< typeof BundledWordPressComponentsIcon > & {
- useBundledComponent?: boolean;
- className?: string;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { Icon } = context;
-
- return
;
-};
-
-const WrappedModal = (
- props: ComponentProps< typeof BundledWordPressComponentsModal > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { Modal } = context;
-
- return
;
-};
-
-const WrappedHorizontalRule = (
- props: ComponentProps< typeof BundledWordPressComponentsHorizontalRule > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { HorizontalRule } = context;
-
- return
;
-};
-
-const WrappedCardFooter = (
- props: ComponentProps< typeof BundledWordPressComponentsCardFooter > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { CardFooter } = context;
-
- return
;
-};
-
-const WrappedCardHeader = (
- props: ComponentProps< typeof BundledWordPressComponentsCardHeader > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { CardHeader } = context;
-
- return
;
-};
-
-const WrappedCardDivider = (
- props: ComponentProps< typeof BundledWordPressComponentsCardDivider > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { CardDivider } = context;
-
- return
;
-};
-
-const WrappedDropdownMenu = (
- props: ComponentProps< typeof BundledWordPressComponentsDropdownMenu > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { DropdownMenu } = context;
-
- return
;
-};
-
-const WrappedMenuGroup = (
- props: ComponentProps< typeof BundledWordPressComponentsMenuGroup > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { MenuGroup } = context;
-
- return
;
-};
-
-const WrappedMenuItem = (
- props: ComponentProps< typeof BundledWordPressComponentsMenuItem > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { MenuItem } = context;
-
- return
;
-};
-
-const WrappedCardNotice = (
- props: ComponentProps< typeof BundledWordPressComponentsCardNotice > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { CardNotice } = context;
-
- return
;
-};
-
-const WrappedNotice = (
- props: ComponentProps< typeof BundledWordPressComponentsNotice > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { Notice } = context;
-
- return
;
-};
-
-const WrappedSelectControl = (
- props: ComponentProps< typeof BundledWordPressComponentsSelectControl > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { SelectControl } = context;
-
- return
;
-};
-
-const WrappedTextControl = (
- props: ComponentProps< typeof BundledWordPressComponentsTextControl > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { TextControl } = context;
-
- return
;
-};
-
-const WrappedTextareaControl = (
- props: ComponentProps<
- typeof BundledWordPressComponentsTextareaControl
- > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { TextareaControl } = context;
-
- return
;
-};
-
-const WrappedFormFileUpload = (
- props: ComponentProps< typeof BundledWordPressComponentsFormFileUpload > & {
- useBundledComponent?: boolean;
- }
-) => {
- const { useBundledComponent, ...rest } = props;
- const context = useContext( WordPressComponentsContext );
-
- if ( ! context || useBundledComponent ) {
- return
;
- }
-
- const { FormFileUpload } = context;
-
- return
;
-};
-
-export {
- WrappedCard as Card,
- WrappedCardBody as CardBody,
- WrappedButton as Button,
- WrappedPanelBody as PanelBody,
- WrappedExternalLink as ExternalLink,
- WrappedFlex as Flex,
- WrappedFlexItem as FlexItem,
- WrappedIcon as Icon,
- WrappedModal as Modal,
- WrappedHorizontalRule as HorizontalRule,
- WrappedCardFooter as CardFooter,
- WrappedCardHeader as CardHeader,
- WrappedCardDivider as CardDivider,
- WrappedDropdownMenu as DropdownMenu,
- WrappedMenuGroup as MenuGroup,
- WrappedMenuItem as MenuItem,
- WrappedCardNotice as CardNotice,
- WrappedNotice as Notice,
- WrappedSelectControl as SelectControl,
- WrappedTextControl as TextControl,
- WrappedTextareaControl as TextareaControl,
- WrappedFormFileUpload as FormFileUpload,
-};
+export { BaseControl } from './components/base-control';
+export { Button } from './components/button';
+export { Card } from './components/card';
+export { CardBody } from './components/card-body';
+export { CardDivider } from './components/card-divider';
+export { CardFooter } from './components/card-footer';
+export { CardHeader } from './components/card-header';
+export { CardNotice } from './components/card-notice';
+export { CheckboxControl } from './components/checkbox-control';
+export { DropdownMenu } from './components/dropdown-menu';
+export { DropZone } from './components/drop-zone';
+export { ExternalLink } from './components/external-link';
+export { Flex } from './components/flex';
+export { FlexBlock } from './components/flex-block';
+export { FlexItem } from './components/flex-item';
+export { FormFileUpload } from './components/form-file-upload';
+export { HorizontalRule } from './components/horizontal-rule';
+export { Icon } from './components/icon';
+export { MenuGroup } from './components/menu-group';
+export { MenuItem } from './components/menu-item';
+export { Modal } from './components/modal';
+export { Notice } from './components/notice';
+export { NumberControl } from './components/number-control';
+export { Panel } from './components/panel';
+export { PanelBody } from './components/panel-body';
+export { Popover } from './components/popover';
+export { RadioControl } from './components/radio-control';
+export { RangeControl } from './components/range-control';
+export { SelectControl } from './components/select-control';
+export { SnackbarList } from './components/snackbar-list';
+export { Spinner } from './components/spinner';
+export { TabPanel } from './components/tab-panel';
+export { TextControl } from './components/text-control';
+export { TextareaControl } from './components/textarea-control';
+export { ToggleControl } from './components/toggle-control';
+export { Tooltip } from './components/tooltip';
+export { Text } from './components/text';
diff --git a/client/components/wp-components-wrapped/make-wrapped-component.tsx b/client/components/wp-components-wrapped/make-wrapped-component.tsx
new file mode 100644
index 00000000000..159c119214d
--- /dev/null
+++ b/client/components/wp-components-wrapped/make-wrapped-component.tsx
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import React, { ComponentProps, useContext } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { WordPressComponentsContext } from 'wcpay/wordpress-components-context/context';
+
+export const makeWrappedComponent = <
+ T extends React.ComponentType< any >,
+ N extends string
+>(
+ BundledComponent: T,
+ componentName: N
+) =>
+ React.forwardRef<
+ any,
+ ComponentProps< T > & {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ __nextHasNoMarginBottom?: boolean;
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ __next40pxDefaultSize?: boolean;
+ }
+ >( ( props, ref ) => {
+ // extracting the `__nextHasNoMarginBottom` and `__next40pxDefaultSize` props from the list of props to avoid issues when running tests.
+ // in the test environments, the `__nextHasNoMarginBottom` and `__next40pxDefaultSize` props generate a warning,
+ // because we're using an outdated bundled version of WP components that doesn't recognize this prop.
+ // to obviate this issue, let's extract it and provide it only when a context value is present
+ // (which shouldn't be the case in test environments).
+
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ const {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ __nextHasNoMarginBottom,
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ __next40pxDefaultSize,
+ ...rest
+ } = props;
+ const context = useContext( WordPressComponentsContext );
+
+ if ( ! context ) {
+ // @ts-expect-error: the type of props is not always well-defined, ignoring the error.
+ return
;
+ }
+
+ const ContextComponent = context[
+ componentName as keyof typeof context
+ ] as React.ComponentType< any >;
+
+ // Conditionally pass special props only if they have defined values to prevent React warnings about unknown DOM props
+ return (
+
+ );
+ } );
diff --git a/client/connect-account-page/index.tsx b/client/connect-account-page/index.tsx
index 478ab6feed8..c1dfbd3469a 100644
--- a/client/connect-account-page/index.tsx
+++ b/client/connect-account-page/index.tsx
@@ -5,13 +5,6 @@
*/
import React, { useEffect, useState, useRef } from 'react';
import { render } from '@wordpress/element';
-import {
- Button,
- Card,
- CardBody,
- Panel,
- PanelBody,
-} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
import { Loader } from '@woocommerce/onboarding';
@@ -20,6 +13,11 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
+import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
+import { Panel } from 'wcpay/components/wp-components-wrapped/components/panel';
+import { PanelBody } from 'wcpay/components/wp-components-wrapped/components/panel-body';
import { recordEvent } from 'tracks';
import Page from 'components/page';
import BannerNotice from 'components/banner-notice';
diff --git a/client/connect-account-page/info-notice-modal.tsx b/client/connect-account-page/info-notice-modal.tsx
index 929176793cf..e855fce2ee4 100644
--- a/client/connect-account-page/info-notice-modal.tsx
+++ b/client/connect-account-page/info-notice-modal.tsx
@@ -4,7 +4,9 @@
* External dependencies
*/
import React, { useState } from 'react';
-import { Button, Modal, Notice } from '@wordpress/components';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
+import { Notice } from 'wcpay/components/wp-components-wrapped/components/notice';
import { __ } from '@wordpress/i18n';
/**
diff --git a/client/connect-account-page/modal/index.js b/client/connect-account-page/modal/index.js
index c3cb728c043..270bbcac265 100644
--- a/client/connect-account-page/modal/index.js
+++ b/client/connect-account-page/modal/index.js
@@ -6,7 +6,8 @@ import interpolateComponents from '@automattic/interpolate-components';
/**
* Internal dependencies
*/
-import { Button, Modal } from '@wordpress/components';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
import { __, sprintf } from '@wordpress/i18n';
import { Link, List } from '@woocommerce/components';
import { useState } from '@wordpress/element';
diff --git a/client/connect-account-page/strings.tsx b/client/connect-account-page/strings.tsx
index 95c1be5a59d..d5fd6f813ee 100644
--- a/client/connect-account-page/strings.tsx
+++ b/client/connect-account-page/strings.tsx
@@ -25,7 +25,7 @@ export default {
'Finish business details verifications',
'woocommerce-payments'
),
- sandbox: __( 'Enable sandbox mode', 'woocommerce-payments' ),
+ sandbox: __( 'Create test account', 'woocommerce-payments' ),
reset: __( 'Reset account', 'woocommerce-payments' ),
},
heading: ( firstName?: string ): string =>
@@ -69,7 +69,7 @@ export default {
description: sprintf(
/* translators: %s: WooPayments */
__(
- 'This option will set up %s in sandbox mode. You can use our test data to set up. When you’re ready to launch your store, switching to live payments is easy.',
+ 'This option will set up a %s test account using test data. When you’re ready to launch your store, switching to live payments is easy.',
'woocommerce-payments'
),
'WooPayments'
@@ -77,7 +77,7 @@ export default {
},
sandboxModeNotice: interpolateComponents( {
mixedString: __(
- 'Sandbox mode is enabled, only test accounts will be created. If you want to process live transactions, please {{learnMoreLink}}disable it{{/learnMoreLink}}.',
+ 'Test mode is enabled, only test accounts will be created. If you want to process live transactions, please {{learnMoreLink}}disable it{{/learnMoreLink}}.',
'woocommerce-payments'
),
components: {
diff --git a/client/data/deposits/resolvers.js b/client/data/deposits/resolvers.js
index 59d5d77f9cf..171e3bace56 100644
--- a/client/data/deposits/resolvers.js
+++ b/client/data/deposits/resolvers.js
@@ -84,7 +84,7 @@ const formatQueryFilters = ( query ) => ( {
],
status_is: query.statusIs,
status_is_not: query.statusIsNot,
- locale: query.userLocale,
+ locale: query.locale,
} );
export const payoutsDownloadEndpoint = `${ NAMESPACE }/deposits/download`;
diff --git a/client/data/disputes/resolvers.js b/client/data/disputes/resolvers.js
index 7e9dd706568..02c31cee5eb 100644
--- a/client/data/disputes/resolvers.js
+++ b/client/data/disputes/resolvers.js
@@ -38,7 +38,7 @@ const formatQueryFilters = ( query ) => ( {
: query.search,
status_is: query.statusIs,
status_is_not: query.statusIsNot,
- locale: query.userLocale,
+ locale: query.locale,
} );
export const disputesDownloadEndpoint = `${ NAMESPACE }/disputes/download`;
diff --git a/client/data/transactions/hooks.ts b/client/data/transactions/hooks.ts
index 53f23d1a4aa..704574f66fe 100644
--- a/client/data/transactions/hooks.ts
+++ b/client/data/transactions/hooks.ts
@@ -20,7 +20,8 @@ export type TransactionType =
| 'refund'
| 'card_reader_fee'
| 'financing_payout'
- | 'financing_paydown';
+ | 'financing_paydown'
+ | 'fee_refund';
export type TransactionSource =
| 'ach_credit_transfer'
diff --git a/client/data/transactions/resolvers.js b/client/data/transactions/resolvers.js
index 34df8e5a6d2..501f89bb046 100644
--- a/client/data/transactions/resolvers.js
+++ b/client/data/transactions/resolvers.js
@@ -58,7 +58,7 @@ export const formatQueryFilters = ( query ) => ( {
source_is_not: query.sourceIsNot,
search: query.search,
user_timezone: getUserTimeZone(),
- locale: query.userLocale,
+ locale: query.locale,
} );
/**
diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx
index e59b52cfc43..c9b8b09ce9f 100644
--- a/client/deposits/details/index.tsx
+++ b/client/deposits/details/index.tsx
@@ -5,15 +5,6 @@
*/
import React from 'react';
import { __, sprintf } from '@wordpress/i18n';
-import {
- Card,
- CardBody,
- CardHeader,
- ExternalLink,
- // @ts-expect-error: Suppressing Module '"@wordpress/components"' has no exported member '__experimentalText'.
- // eslint-disable-next-line @wordpress/no-unsafe-wp-apis -- used by TableCard component which we replicate here.
- __experimentalText as Text,
-} from '@wordpress/components';
import {
SummaryListPlaceholder,
SummaryList,
@@ -25,6 +16,11 @@ import clsx from 'clsx';
/**
* Internal dependencies.
*/
+import { Text } from 'wcpay/components/wp-components-wrapped/components/text';
+import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
+import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
+import { CardHeader } from 'wcpay/components/wp-components-wrapped/components/card-header';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
import type { CachedDeposit } from 'types/deposits';
import { useDeposit } from 'data';
import TransactionsList from 'transactions/list';
diff --git a/client/deposits/index.tsx b/client/deposits/index.tsx
index d54cfc8b81d..c8f0e644ca9 100644
--- a/client/deposits/index.tsx
+++ b/client/deposits/index.tsx
@@ -4,7 +4,7 @@
* External dependencies
*/
import React, { useState } from 'react';
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
import { addQueryArgs } from '@wordpress/url';
/**
diff --git a/client/deposits/instant-payouts/index.tsx b/client/deposits/instant-payouts/index.tsx
index 81ed4b54bbb..ddbe9144424 100644
--- a/client/deposits/instant-payouts/index.tsx
+++ b/client/deposits/instant-payouts/index.tsx
@@ -4,7 +4,6 @@
* External dependencies
*/
import React from 'react';
-import { Button } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
@@ -12,6 +11,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import './style.scss';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
import { formatCurrency } from 'multi-currency/interface/functions';
import InstantPayoutModal from './modal';
import { useInstantDeposit } from 'wcpay/data';
@@ -49,6 +49,7 @@ const InstantPayoutButton: React.FC< InstantPayoutButtonProps > = ( {
isPrimary
disabled={ buttonDisabled }
onClick={ () => setModalOpen( true ) }
+ __next40pxDefaultSize
>
{ sprintf(
__(
diff --git a/client/deposits/instant-payouts/modal.tsx b/client/deposits/instant-payouts/modal.tsx
index ac8fdab1f0d..334570b1d5c 100644
--- a/client/deposits/instant-payouts/modal.tsx
+++ b/client/deposits/instant-payouts/modal.tsx
@@ -4,7 +4,8 @@
* External dependencies
*/
import React from 'react';
-import { Button, Modal } from '@wordpress/components';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
import { __, sprintf } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx
index e346cd88220..c09cbd027d5 100644
--- a/client/deposits/list/index.tsx
+++ b/client/deposits/list/index.tsx
@@ -218,7 +218,7 @@ export const DepositsList = (): JSX.Element => {
} );
const userEmail = wcpaySettings.currentUserEmail;
- const userLocale = wcpaySettings.userLocale.code;
+ const locale = wcSettings.locale.userLocale;
const {
date_before: dateBefore,
@@ -232,7 +232,7 @@ export const DepositsList = (): JSX.Element => {
const exportRequestURL = getPayoutsCSVRequestURL( {
userEmail,
- userLocale,
+ locale,
dateBefore,
dateAfter,
dateBetween,
diff --git a/client/deposits/list/test/index.tsx b/client/deposits/list/test/index.tsx
index 9f6102f394e..443c0d798c3 100644
--- a/client/deposits/list/test/index.tsx
+++ b/client/deposits/list/test/index.tsx
@@ -78,9 +78,6 @@ declare const global: {
country: string;
};
dateFormat: string;
- userLocale: {
- code: string;
- };
};
};
@@ -144,9 +141,6 @@ describe( 'Deposits list', () => {
},
},
dateFormat: 'M j Y',
- userLocale: {
- code: 'en',
- },
};
} );
@@ -297,7 +291,7 @@ describe( 'Deposits list', () => {
expect( mockApiFetch ).toHaveBeenCalledWith( {
method: 'POST',
path:
- '/wc/v3/payments/deposits/download?user_email=mock%40example.com&locale=en',
+ '/wc/v3/payments/deposits/download?user_email=mock%40example.com&locale=en_US',
} );
} );
} );
diff --git a/client/disable-confirmation-modal/index.js b/client/disable-confirmation-modal/index.js
index 954c37af2f6..c45603affaa 100644
--- a/client/disable-confirmation-modal/index.js
+++ b/client/disable-confirmation-modal/index.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import React from 'react';
-import { Button } from '@wordpress/components';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
import { __, sprintf } from '@wordpress/i18n';
import interpolateComponents from '@automattic/interpolate-components';
diff --git a/client/disputes/evidence/fields.js b/client/disputes/evidence/fields.js
deleted file mode 100644
index 96665b32207..00000000000
--- a/client/disputes/evidence/fields.js
+++ /dev/null
@@ -1,448 +0,0 @@
-/** @format **/
-
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { includes } from 'lodash';
-
-/* eslint-disable max-len */
-const sections = [
- {
- key: 'general',
- title: __( 'General evidence', 'woocommerce-payments' ),
- description: __(
- 'Provide general evidence about the customer and the order.',
- 'woocommerce-payments'
- ),
- fields: [
- {
- key: 'product_description',
- label: __( 'Product description', 'woocommerce-payments' ),
- maxLength: 20000,
- type: 'textarea',
- description: __(
- 'A description of the product or service and any relevant details on how this was presented to the customer at the time of purchase.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'customer_name',
- label: __( 'Customer name', 'woocommerce-payments' ),
- type: 'text',
- },
- {
- key: 'customer_email_address',
- label: __( 'Customer email', 'woocommerce-payments' ),
- type: 'text',
- },
- {
- key: 'customer_signature',
- label: __( 'Customer signature', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- "A relevant document or contract showing the customer's signature (if available).",
- 'woocommerce-payments'
- ),
- },
- {
- key: 'billing_address',
- label: __( 'Customer billing address', 'woocommerce-payments' ),
- type: 'textarea',
- },
- {
- key: 'customer_purchase_ip',
- label: __( 'Customer IP address', 'woocommerce-payments' ),
- type: 'text',
- },
- {
- key: 'receipt',
- label: __( 'Receipt', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'Any receipt or message sent to the customer notifying them of the charge. This field will be automatically filled with a Stripe generated email receipt if any such receipt was sent.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'customer_communication',
- label: __( 'Customer communication', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'Any communication with the customer that you feel is relevant to your case (e.g. emails proving that they received the product or service, or demonstrating their use of or satisfaction with the product or service).',
- 'woocommerce-payments'
- ),
- },
- ],
- },
- {
- key: 'refund_policy_info',
- title: __( 'Refund policy info', 'woocommerce-payments' ),
- fields: [
- {
- key: 'refund_policy',
- label: __( 'Refund policy', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'Your refund policy, as shown or provided to the customer.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'refund_policy_disclosure',
- label: __( 'Refund policy disclosure', 'woocommerce-payments' ),
- maxLength: 20000,
- type: 'textarea',
- description: __(
- 'An explanation of how and when the customer was shown or provided your refund policy prior to purchase.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'refund_refusal_explanation',
- label: __(
- 'Refund refusal explanation',
- 'woocommerce-payments'
- ),
- maxLength: 20000,
- type: 'textarea',
- description: __(
- 'Your explanation for why the customer is not entitled to a refund.',
- 'woocommerce-payments'
- ),
- },
- ],
- reason: 'credit_not_processed',
- },
- {
- key: 'duplicate_charge_info',
- title: __( 'Duplicate charge info', 'woocommerce-payments' ),
- fields: [
- {
- key: 'duplicate_charge_id',
- label: __( 'Duplicate charge ID', 'woocommerce-payments' ),
- type: 'text',
- description: __(
- 'The charge ID for the previous payment that appears to be a duplicate of the one that is disputed.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'duplicate_charge_explanation',
- label: __(
- 'Explanation of duplicate charge',
- 'woocommerce-payments'
- ),
- maxLength: 20000,
- type: 'textarea',
- description: __(
- 'An explanation of the difference between the disputed payment and the prior one that appears to be a duplicate.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'duplicate_charge_documentation',
- label: __(
- 'Duplicate charge documentation',
- 'woocommerce-payments'
- ),
- type: 'file',
- description: __(
- 'Upload documentation for the prior payment that can uniquely identify it, such as a separate receipt. This document should be paired with a similar document from the disputed payment that proves the two are separate. This should also include a separate shipping label or receipt for the other payment. If multiple products were shipped together, provide a packing list that shows each purchase.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'shipping_documentation',
- label: __( 'Shipping documentation', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'A shipping label or receipt for the disputed payment.',
- 'woocommerce-payments'
- ),
- denormalized: true,
- productType: 'physical_product',
- },
- {
- key: 'service_documentation',
- label: __( 'Service documentation', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'A copy of a service agreement or documentation for the disputed payment.',
- 'woocommerce-payments'
- ),
- denormalized: true,
- productType: 'offline_service',
- },
- ],
- reason: 'duplicate',
- },
- {
- key: 'shipping_information',
- title: __( 'Shipping information', 'woocommerce-payments' ),
- fields: [
- {
- key: 'shipping_carrier',
- label: __( 'Shipping carrier', 'woocommerce-payments' ),
- type: 'text',
- description: __(
- 'The delivery service that shipped a physical product, such as Fedex, UPS, USPS, etc. If multiple carriers were used for this purchase, please separate them with commas.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'shipping_tracking_number',
- label: __( 'Tracking number', 'woocommerce-payments' ),
- type: 'text',
- description: __(
- 'The tracking number (if available) for a physical product, obtained from the delivery service. If multiple tracking numbers were generated for this purchase, please separate them with commas. When we compile your evidence into a single document, these tracking numbers will be expanded to include detailed delivery information from the carrier.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'shipping_documentation',
- label: __( 'Proof of shipping', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'Provide documentation as proof that a product was shipped to the cardholder at the same address the cardholder provided to you. This could include a copy of the shipment receipt or label, and show the full shipping address of the cardholder, if possible.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'shipping_date',
- label: __( 'Date of shipment', 'woocommerce-payments' ),
- type: 'date',
- description: __(
- 'The date on which a physical product began its route to the shipping address. This date should be prior to the date of the dispute.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'shipping_address',
- label: __( 'Shipping address', 'woocommerce-payments' ),
- type: 'textarea',
- description: __(
- 'The address to which a physical product was shipped. The shipping address must match a billing address verified with AVS. (A signature is not required as evidence of delivery).',
- 'woocommerce-payments'
- ),
- },
- ],
- reason: [
- 'fraudulent',
- 'product_not_received',
- 'product_unacceptable',
- 'unrecognized',
- ],
- productType: 'physical_product',
- },
- {
- key: 'cancellation_policy_info',
- title: __( 'Cancellation policy info', 'woocommerce-payments' ),
- fields: [
- {
- key: 'cancellation_policy',
- label: __( 'Cancellation policy', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'Your subscription cancellation policy, as shown to the customer.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'cancellation_policy_disclosure',
- label: __(
- 'Cancellation policy disclosure',
- 'woocommerce-payments'
- ),
- maxLength: 20000,
- type: 'textarea',
- description: __(
- 'An explanation of how and when the customer was shown your cancellation policy prior to purchase.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'cancellation_rebuttal',
- label: __( 'Cancellation rebuttal', 'woocommerce-payments' ),
- maxLength: 20000,
- type: 'textarea',
- description: __(
- "A justification for why the customer's subscription was not canceled.",
- 'woocommerce-payments'
- ),
- },
- ],
- reason: 'subscription_canceled',
- },
- {
- key: 'download_and_activity_logs',
- title: __( 'Download and activity logs', 'woocommerce-payments' ),
- fields: [
- {
- key: 'access_activity_log',
- type: 'file',
- description: [
- __(
- 'Provide at least two of the following pieces of information:',
- 'woocommerce-payments'
- ),
- __(
- "• Customer's IP address and their device's geographical location at the time of purchase",
- 'woocommerce-payments'
- ),
- __(
- '• Device ID and name of the device',
- 'woocommerce-payments'
- ),
- __(
- '• Customer name and email address linked to their customer profile',
- 'woocommerce-payments'
- ),
- __(
- '• Evidence that the customer logged into their account for your business before the transaction date',
- 'woocommerce-payments'
- ),
- __(
- '• Evidence that your website or app was accessed by the cardholder for purchase or services on or after the transaction date',
- 'woocommerce-payments'
- ),
- __(
- '• Evidence that the same device and card used in the disputed payment was used in a previous payment that was not disputed',
- 'woocommerce-payments'
- ),
- ],
- },
- ],
- reason: [ 'fraudulent', 'product_not_received' ],
- productType: 'digital_product_or_service',
- },
- {
- key: 'download_and_activity_logs',
- title: __( 'Download and activity logs', 'woocommerce-payments' ),
- fields: [
- {
- key: 'access_activity_log',
- type: 'file',
- description: __(
- 'Any server or activity logs showing proof that the cardholder accessed or downloaded the purchased digital product. This information should include IP addresses, corresponding timestamps, and any detailed recorded activity.',
- 'woocommerce-payments'
- ),
- },
- ],
- reason: [
- 'product_unacceptable',
- 'subscription_canceled',
- 'unrecognized',
- ],
- productType: 'digital_product_or_service',
- denormalized: true,
- },
- {
- key: 'service_details',
- title: __( 'Service details', 'woocommerce-payments' ),
- fields: [
- {
- key: 'service_date',
- label: __( 'Service date', 'woocommerce-payments' ),
- type: 'date',
- description: __(
- 'The date on which the cardholder received or began receiving the purchased service.',
- 'woocommerce-payments'
- ),
- },
- {
- key: 'service_documentation',
- label: __( 'Proof of service', 'woocommerce-payments' ),
- type: 'file',
- description: __(
- 'Documentation showing proof that a service was provided to the cardholder. This could include a copy of a signed contract, work order, or other form of written agreement.',
- 'woocommerce-payments'
- ),
- },
- ],
- reason: [
- 'fraudulent',
- 'product_not_received',
- 'product_unacceptable',
- 'subscription_canceled',
- 'unrecognized',
- ],
- productType: 'offline_service',
- },
- {
- key: 'uncategorized',
- title: __( 'Additional details', 'woocommerce-payments' ),
- description: __(
- "Provide any extra evidence or statements you'd like the bank to see, either as text or by uploading a document.",
- 'woocommerce-payments'
- ),
- fields: [
- {
- key: 'uncategorized_text',
- label: __( 'Additional details', 'woocommerce-payments' ),
- maxLength: 20000,
- type: 'textarea',
- },
- {
- key: 'uncategorized_file',
- label: __( 'Additional document', 'woocommerce-payments' ),
- type: 'file',
- },
- ],
- },
-];
-/* eslint-enable max-len */
-
-/**
- * Return evidence fields that pertain to given reason and productType.
- *
- * Sections can optionally specify 'reason' as a string or array of strings, and/or 'productType'.
- * Fields can optionally specify 'productType'.
- *
- * Sections and fields can specify denormalized: true to be omitted when all fields are shown.
- *
- * @param {string} reason Dispute reason for which to present fields.
- * @param {string} productType Product type for which to present fields.
- *
- * @return {Array} Sections of fields.
- */
-export default ( reason, productType ) => {
- if ( ! reason || ! productType ) {
- return [];
- }
-
- if ( productType === 'multiple' ) {
- return sections
- .map( ( section ) => {
- if ( section.denormalized ) {
- return null;
- }
-
- return {
- ...section,
- fields: section.fields.filter(
- ( field ) => ! field.denormalized
- ),
- };
- } )
- .filter( Boolean );
- }
-
- return sections
- .map( ( section ) => {
- const reasonMismatch =
- section.reason && ! includes( section.reason, reason );
- const productTypeMismatch =
- section.productType && section.productType !== productType;
- if ( reasonMismatch || productTypeMismatch ) {
- return null;
- }
-
- const fields = section.fields.filter( ( field ) => {
- return ! field.productType || field.productType === productType;
- } );
-
- return { ...section, fields };
- } )
- .filter( Boolean );
-};
diff --git a/client/disputes/evidence/index.js b/client/disputes/evidence/index.js
deleted file mode 100644
index f0bdc423c9f..00000000000
--- a/client/disputes/evidence/index.js
+++ /dev/null
@@ -1,753 +0,0 @@
-/** @format **/
-
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import apiFetch from '@wordpress/api-fetch';
-import {
- Button,
- Card,
- CardBody,
- CardFooter,
- CardHeader,
- TextControl,
- TextareaControl,
- SelectControl,
- Notice,
-} from 'wcpay/components/wp-components-wrapped';
-import { merge, some, flatten, isMatchWith } from 'lodash';
-
-/**
- * Internal dependencies.
- */
-import '../style.scss';
-import { useDisputeEvidence } from 'wcpay/data';
-import evidenceFields from './fields';
-import { FileUploadControl, UploadedReadOnly } from 'components/file-upload';
-import { TestModeNotice } from 'components/test-mode-notice';
-import Info from '../info';
-import Page from 'components/page';
-import ErrorBoundary from 'components/error-boundary';
-import Loadable, { LoadableBlock } from 'components/loadable';
-import useConfirmNavigation from 'utils/use-confirm-navigation';
-import { recordEvent } from 'tracks';
-import { getAdminUrl } from 'wcpay/utils';
-
-const DISPUTE_EVIDENCE_MAX_LENGTH = 150000;
-const PRODUCT_TYPE_META_KEY = '__product_type';
-
-/* If description is an array, separate with newline elements. */
-const expandHelp = ( description ) => {
- return Array.isArray( description )
- ? flatten(
- description.map( ( line, i ) => [ line,
] )
- )
- : description;
-};
-
-export const DisputeEvidenceForm = ( props ) => {
- const {
- fields,
- evidence,
- onChange,
- onFileChange,
- onFileRemove,
- onSave,
- readOnly,
- } = props;
-
- const { createErrorNotice } = useDispatch( 'core/notices' );
- const { getNotices } = useSelect( 'core/notices' );
-
- if ( ! fields || ! fields.length ) {
- return null;
- }
-
- const isEvidenceWithinLengthLimit = ( field, value ) => {
- // Enforce character count for individual evidence field.
- if ( field.maxLength && value.length >= field.maxLength ) {
- return false;
- }
-
- // Enforce character count for combined evidence fields.
- const totalLength = Object.values( {
- ...evidence,
- [ field.key ]: value,
- } ).reduce(
- ( acc, cur ) =>
- typeof cur === 'string' ? acc + cur.length : acc,
- 0
- );
- if ( totalLength >= DISPUTE_EVIDENCE_MAX_LENGTH ) {
- return false;
- }
-
- return true;
- };
-
- const composeDefaultControlProps = ( field ) => ( {
- label: field.label,
- value: evidence[ field.key ] || '',
- onChange: ( value ) => {
- if ( ! isEvidenceWithinLengthLimit( field, value ) ) {
- const errorMessage = __(
- 'Reached maximum character count for evidence',
- 'woocommerce-payments'
- );
- if (
- ! getNotices().some(
- ( notice ) => notice.content === errorMessage
- )
- ) {
- createErrorNotice( errorMessage );
- }
- return;
- }
- onChange( field.key, value );
- },
- disabled: readOnly,
- help: readOnly && expandHelp( field.description ),
- } );
-
- const composeFileUploadProps = ( field ) => {
- const fileName =
- ( evidence.metadata && evidence.metadata[ field.key ] ) || '';
- const isLoading =
- evidence.isUploading &&
- ( evidence.isUploading[ field.key ] || false );
- const error =
- evidence.uploadingErrors &&
- ( evidence.uploadingErrors[ field.key ] || '' );
- const isDone = ! isLoading && fileName.length > 0;
- const accept = '.pdf, image/png, image/jpeg';
- return {
- field,
- fileName,
- accept,
- onFileChange,
- onFileRemove,
- disabled: readOnly,
- isLoading,
- isDone,
- error,
- help: readOnly && expandHelp( field.description ),
- };
- };
-
- const composeFieldControl = ( field ) => {
- const displayAsReadOnly = readOnly && ! evidence[ field.key ];
- switch ( field.type ) {
- case 'file':
- return readOnly ? (
-
- ) : (
-
- );
- case 'text':
- return (
-
- );
- case 'date':
- return (
-
- );
- default:
- return displayAsReadOnly ? (
- ''
- ) : (
-
- );
- }
- };
-
- const evidenceSections = fields.map( ( section ) => {
- return (
-
- { section.title }
-
- { ! readOnly && section.description && (
- { section.description }
- ) }
- { section.fields.map( composeFieldControl ) }
-
-
- );
- } );
-
- const confirmMessage = __(
- "Are you sure you're ready to submit this evidence? Evidence submissions are final.",
- 'woocommerce-payments'
- );
- const handleSubmit = () =>
- window.confirm( confirmMessage ) && onSave( true );
-
- return (
- <>
- { evidenceSections }
- { readOnly ? null : (
-
-
-
- { __(
- // eslint-disable-next-line max-len
- "When you submit your evidence, we'll format it and send it to the cardholder's bank, then email you once the dispute has been decided.",
- 'woocommerce-payments'
- ) }
-
-
-
- { __(
- 'Evidence submission is final.',
- 'woocommerce-payments'
- ) }
- { ' ' }
- { __(
- 'You can also save this evidence for later instead of submitting it immediately.',
- 'woocommerce-payments'
- ) }{ ' ' }
-
- { __(
- 'We will automatically submit any saved evidence at the due date.',
- 'woocommerce-payments'
- ) }
-
-
-
-
- { /* Use wrapping div to keep buttons grouped together. */ }
-
-
-
-
-
-
- ) }
-
- );
-};
-
-export const DisputeEvidencePage = ( props ) => {
- const {
- isLoading,
- dispute = {},
- productType,
- onChangeProductType,
- ...evidenceFormProps
- } = props;
- const readOnly =
- dispute &&
- dispute.status !== 'needs_response' &&
- dispute.status !== 'warning_needs_response';
- const disputeIsAvailable = ! isLoading && dispute.id;
-
- const readOnlyNotice = (
-
- { __(
- 'Evidence is already submitted. Details below are read-only.',
- 'woocommerce-payments'
- ) }
-
- );
-
- if ( ! isLoading && ! disputeIsAvailable ) {
- return (
-
-
-
- { __( 'Dispute not loaded', 'woocommerce-payments' ) }
-
-
- );
- }
-
- return (
-
-
- { readOnly && ! isLoading && readOnlyNotice }
-
-
-
- {
-
- }
-
-
-
-
-
-
-
-
-
- {
-
- }
-
-
-
-
-
-
-
-
- {
- // Don't render the form placeholder while the dispute is being loaded.
- // The form content depends on the selected product type, hence placeholder might disappear after loading.
- ! isLoading && (
-
-
-
- )
- }
-
- );
-};
-
-/**
- * Retrieves product type from the dispute.
- *
- * @param {Object?} dispute Dispute object
- * @return {string} dispute product type
- */
-const getDisputeProductType = ( dispute ) => {
- if ( ! dispute ) {
- return '';
- }
-
- let productType = dispute.metadata[ PRODUCT_TYPE_META_KEY ] || '';
-
- // Fallback to `multiple` when evidence submitted but no product type meta.
- if (
- ! productType &&
- dispute.evidence_details &&
- dispute.evidence_details.has_evidence
- ) {
- productType = 'multiple';
- }
-
- return productType;
-};
-
-// Temporary MVP data wrapper
-export default ( { query } ) => {
- const path = `/wc/v3/payments/disputes/${ query.id }`;
-
- const [ dispute, setDispute ] = useState();
- const [ loading, setLoading ] = useState( false );
- const [ evidence, setEvidence ] = useState( {} ); // Evidence to update.
- const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
-
- const {
- createSuccessNotice,
- createErrorNotice,
- createInfoNotice,
- } = useDispatch( 'core/notices' );
-
- const pristine =
- ! dispute ||
- isMatchWith(
- dispute.evidence,
- evidence,
- ( disputeValue, formValue ) => {
- // Treat null and '' as equal values.
- if ( disputeValue === null && ! formValue ) {
- return true;
- }
- }
- );
-
- const confirmationNavigationCallback = useConfirmNavigation( () => {
- if ( pristine || redirectAfterSave ) {
- return;
- }
-
- return __(
- 'There are unsaved changes on this page. Are you sure you want to leave and discard the unsaved changes?',
- 'woocommerce-payments'
- );
- } );
-
- useEffect( confirmationNavigationCallback, [
- pristine,
- confirmationNavigationCallback,
- redirectAfterSave,
- ] );
-
- useEffect( () => {
- const fetchDispute = async () => {
- setLoading( true );
- try {
- setDispute( await apiFetch( { path } ) );
- } finally {
- setLoading( false );
- }
- };
-
- fetchDispute();
- }, [ setLoading, setDispute, path ] );
-
- const updateEvidence = ( key, value ) =>
- setEvidence( ( e ) => ( { ...e, [ key ]: value } ) );
- const updateDispute = ( updates = {} ) =>
- setDispute( ( d ) => merge( {}, d, updates ) );
- const isUploadingEvidence = () => some( dispute.isUploading );
-
- const doRemoveFile = ( key ) => {
- updateEvidence( key, '' );
- updateDispute( {
- metadata: { [ key ]: '' },
- uploadingErrors: { [ key ]: '' },
- fileSize: { [ key ]: 0 },
- } );
- };
-
- const fileSizeExceeded = ( latestFileSize ) => {
- const fileSizeLimitInBytes = 4500000;
- const fileSizes = dispute.fileSize
- ? Object.values( dispute.fileSize )
- : [];
- const totalFileSize =
- fileSizes.reduce( ( acc, fileSize ) => acc + fileSize, 0 ) +
- latestFileSize;
- if ( fileSizeLimitInBytes < totalFileSize ) {
- createInfoNotice(
- __(
- "The files you've attached to this dispute as evidence will exceed the limit for a " +
- "dispute's total size. Try using smaller files as evidence. Hint: if you've attached " +
- 'images, you might want to try providing them in lower resolutions.',
- 'woocommerce-payments'
- )
- );
- return true;
- }
- };
-
- const doUploadFile = async ( key, file ) => {
- if ( ! file ) {
- return;
- }
-
- if ( fileSizeExceeded( file.size ) ) {
- return;
- }
-
- recordEvent( 'wcpay_dispute_file_upload_started', {
- type: key,
- } );
-
- const body = new FormData();
- body.append( 'file', file );
- body.append( 'purpose', 'dispute_evidence' );
-
- // Set request status for UI.
- updateDispute( {
- metadata: { [ key ]: '' },
- isUploading: { [ key ]: true },
- uploadingErrors: { [ key ]: '' },
- } );
-
- // Force reload evidence components.
- updateEvidence( key, '' );
-
- try {
- const uploadedFile = await apiFetch( {
- path: '/wc/v3/payments/file',
- method: 'post',
- body,
- } );
- // Store uploaded file name in metadata to display in submitted evidence or saved for later form.
- updateDispute( {
- metadata: { [ key ]: uploadedFile.filename },
- isUploading: { [ key ]: false },
- fileSize: { [ key ]: uploadedFile.size },
- } );
- updateEvidence( key, uploadedFile.id );
-
- recordEvent( 'wcpay_dispute_file_upload_success', {
- type: key,
- } );
- } catch ( err ) {
- recordEvent( 'wcpay_dispute_file_upload_failed', {
- message: err.message,
- } );
-
- updateDispute( {
- metadata: { [ key ]: '' },
- isUploading: { [ key ]: false },
- uploadingErrors: { [ key ]: err.message },
- } );
-
- // Force reload evidence components.
- updateEvidence( key, '' );
- }
- };
-
- const handleSaveSuccess = ( submit ) => {
- const message = submit
- ? __( 'Evidence submitted!', 'woocommerce-payments' )
- : __( 'Evidence saved!', 'woocommerce-payments' );
-
- recordEvent(
- submit
- ? 'wcpay_dispute_submit_evidence_success'
- : 'wcpay_dispute_save_evidence_success'
- );
- /*
- We rely on WC-Admin Transient notices to display success message.
- https://github.com/woocommerce/woocommerce-admin/tree/master/client/layout/transient-notices.
- */
- createSuccessNotice( message, {
- actions: [
- {
- label: submit
- ? __(
- 'View submitted evidence',
- 'woocommerce-payments'
- )
- : __(
- 'Return to evidence submission',
- 'woocommerce-payments'
- ),
- url: getAdminUrl( {
- page: 'wc-admin',
- path: '/payments/disputes/challenge',
- id: query.id,
- } ),
- },
- ],
- } );
-
- setRedirectAfterSave( true );
- };
-
- useEffect( () => {
- if ( redirectAfterSave && pristine ) {
- const href = getAdminUrl( {
- page: 'wc-admin',
- path: '/payments/disputes',
- filter: 'awaiting_response',
- } );
- window.location.replace( href );
- }
- }, [ redirectAfterSave, pristine ] );
-
- const handleSaveError = ( err, submit ) => {
- recordEvent(
- submit
- ? 'wcpay_dispute_submit_evidence_failed'
- : 'wcpay_dispute_save_evidence_failed'
- );
-
- const message = submit
- ? __( 'Failed to submit evidence. (%s)', 'woocommerce-payments' )
- : __( 'Failed to save evidence. (%s)', 'woocommerce-payments' );
- createErrorNotice( sprintf( message, err.message ) );
- };
-
- const { updateDispute: updateDisputeInStore } = useDisputeEvidence();
-
- const doSave = async ( submit ) => {
- // Prevent submit if upload is in progress.
- if ( isUploadingEvidence() ) {
- createInfoNotice(
- __(
- 'Please wait until file upload is finished',
- 'woocommerce-payments'
- )
- );
- return;
- }
-
- setLoading( true );
-
- try {
- recordEvent(
- submit
- ? 'wcpay_dispute_submit_evidence_clicked'
- : 'wcpay_dispute_save_evidence_clicked'
- );
-
- const { metadata } = dispute;
- const updatedDispute = await apiFetch( {
- path,
- method: 'post',
- data: {
- // Send full evidence, as submission does not appear to work without new evidence despite being optional.
- evidence: { ...dispute.evidence, ...evidence },
- metadata,
- submit,
- },
- } );
- setDispute( updatedDispute );
- setEvidence( {} );
- handleSaveSuccess( submit );
- updateDisputeInStore( updatedDispute );
- } catch ( err ) {
- handleSaveError( err, submit );
- } finally {
- setLoading( false );
- }
- };
-
- const productType = getDisputeProductType( dispute );
- const updateProductType = ( newProductType ) => {
- const properties = {
- selection: newProductType,
- };
- recordEvent( 'wcpay_dispute_product_selected', properties );
- updateDispute( {
- metadata: { [ PRODUCT_TYPE_META_KEY ]: newProductType },
- } );
- };
-
- const disputeReason = dispute && dispute.reason;
- const fieldsToDisplay = useMemo(
- () => evidenceFields( disputeReason, productType ),
- [ disputeReason, productType ]
- );
-
- return (
-
- );
-};
diff --git a/client/disputes/evidence/test/__snapshots__/index.js.snap b/client/disputes/evidence/test/__snapshots__/index.js.snap
deleted file mode 100644
index 8ad2fd79c7e..00000000000
--- a/client/disputes/evidence/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,1143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dispute evidence form needing response, renders correctly 1`] = `
-.emotion-0 {
- background-color: #fff;
- color: #1e1e1e;
- position: relative;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
- outline: none;
- border-radius: calc(2px - 1px);
-}
-
-.emotion-2 {
- height: 100%;
-}
-
-.emotion-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- width: 100%;
- border-bottom: 1px solid;
- box-sizing: border-box;
- border-color: rgba(0, 0, 0, 0.1);
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-4>*+*:not( marquee ) {
- margin-left: calc(4px * 2);
-}
-
-.emotion-4>* {
- min-width: 0;
-}
-
-.emotion-4:last-child {
- border-bottom: none;
-}
-
-.emotion-4:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-4:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-6 {
- box-sizing: border-box;
- height: auto;
- max-height: 100%;
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-6:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-6:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-8 {
- font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
- font-size: 13px;
-}
-
-.emotion-10 {
- margin-bottom: calc(4px * 2);
-}
-
-.components-panel__row .emotion-10 {
- margin-bottom: inherit;
-}
-
-.emotion-12 {
- display: inline-block;
- margin-bottom: calc(4px * 2);
-}
-
-.emotion-14 {
- width: 100%;
- font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
- padding: 6px 8px;
- box-shadow: 0 0 0 transparent;
- -webkit-transition: box-shadow 0.1s linear;
- transition: box-shadow 0.1s linear;
- border-radius: 2px;
- border: 1px solid #757575;
- font-size: 16px;
- line-height: normal;
-}
-
-@media (min-width: 600px) {
- .emotion-14 {
- font-size: 13px;
- line-height: normal;
- }
-}
-
-.emotion-14:focus {
- border-color: var( --wp-admin-theme-color );
- box-shadow: 0 0 0 calc( 1.5px - 1px ) var( --wp-admin-theme-color );
- outline: 2px solid transparent;
-}
-
-.emotion-14::-webkit-input-placeholder {
- color: rgba(30, 30, 30, 0.62);
-}
-
-.emotion-14::-moz-placeholder {
- opacity: 1;
- color: rgba(30, 30, 30, 0.62);
-}
-
-.emotion-14:-ms-input-placeholder {
- color: rgba(30, 30, 30, 0.62);
-}
-
-.is-dark-theme .emotion-14::-webkit-input-placeholder {
- color: rgba(255, 255, 255, 0.65);
-}
-
-.is-dark-theme .emotion-14::-moz-placeholder {
- opacity: 1;
- color: rgba(255, 255, 255, 0.65);
-}
-
-.is-dark-theme .emotion-14:-ms-input-placeholder {
- color: rgba(255, 255, 255, 0.65);
-}
-
-.emotion-34 {
- background: transparent;
- display: block;
- margin: 0!important;
- pointer-events: none;
- position: absolute;
- will-change: box-shadow;
- border-radius: inherit;
- bottom: 0;
- box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
- opacity: 1;
- left: 0;
- right: 0;
- top: 0;
- -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
- transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
- border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
- .emotion-34 {
- transition-duration: 0ms;
- }
-}
-
-.emotion-44 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- width: 100%;
- border-top: 1px solid;
- box-sizing: border-box;
- border-color: rgba(0, 0, 0, 0.1);
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-44>*+*:not( marquee ) {
- margin-left: calc(4px * 2);
-}
-
-.emotion-44>* {
- min-width: 0;
-}
-
-.emotion-44:first-of-type {
- border-top: none;
-}
-
-.emotion-44:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-44:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- When you submit your evidence, we'll format it and send it to the cardholder's bank, then email you once the dispute has been decided.
-
-
-
- Evidence submission is final.
-
-
- You can also save this evidence for later instead of submitting it immediately.
-
-
- We will automatically submit any saved evidence at the due date.
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Dispute evidence form not needing response, renders correctly 1`] = `
-.emotion-0 {
- background-color: #fff;
- color: #1e1e1e;
- position: relative;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
- outline: none;
- border-radius: calc(2px - 1px);
-}
-
-.emotion-2 {
- height: 100%;
-}
-
-.emotion-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- width: 100%;
- border-bottom: 1px solid;
- box-sizing: border-box;
- border-color: rgba(0, 0, 0, 0.1);
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-4>*+*:not( marquee ) {
- margin-left: calc(4px * 2);
-}
-
-.emotion-4>* {
- min-width: 0;
-}
-
-.emotion-4:last-child {
- border-bottom: none;
-}
-
-.emotion-4:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-4:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-6 {
- box-sizing: border-box;
- height: auto;
- max-height: 100%;
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-6:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-6:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-8 {
- font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
- font-size: 13px;
-}
-
-.emotion-10 {
- margin-bottom: calc(4px * 2);
-}
-
-.components-panel__row .emotion-10 {
- margin-bottom: inherit;
-}
-
-.emotion-12 {
- display: inline-block;
- margin-bottom: calc(4px * 2);
-}
-
-.emotion-26 {
- background: transparent;
- display: block;
- margin: 0!important;
- pointer-events: none;
- position: absolute;
- will-change: box-shadow;
- border-radius: inherit;
- bottom: 0;
- box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
- opacity: 1;
- left: 0;
- right: 0;
- top: 0;
- -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
- transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
- border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
- .emotion-26 {
- transition-duration: 0ms;
- }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- : Evidence file was not uploaded
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Dispute evidence page renders correctly 1`] = `
-.emotion-0 {
- background-color: #fff;
- color: #1e1e1e;
- position: relative;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
- outline: none;
- border-radius: calc(2px - 1px);
-}
-
-.emotion-2 {
- height: 100%;
-}
-
-.emotion-4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- width: 100%;
- border-bottom: 1px solid;
- box-sizing: border-box;
- border-color: rgba(0, 0, 0, 0.1);
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-4>*+*:not( marquee ) {
- margin-left: calc(4px * 2);
-}
-
-.emotion-4>* {
- min-width: 0;
-}
-
-.emotion-4:last-child {
- border-bottom: none;
-}
-
-.emotion-4:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-4:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-6 {
- box-sizing: border-box;
- height: auto;
- max-height: 100%;
- padding: calc(4px * 6) calc(4px * 8);
-}
-
-.emotion-6:first-of-type {
- border-top-left-radius: calc(2px - 1px);
- border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-6:last-of-type {
- border-bottom-left-radius: calc(2px - 1px);
- border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-8 {
- background: transparent;
- display: block;
- margin: 0!important;
- pointer-events: none;
- position: absolute;
- will-change: box-shadow;
- border-radius: inherit;
- bottom: 0;
- box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
- opacity: 1;
- left: 0;
- right: 0;
- top: 0;
- -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
- transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
- border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
- .emotion-8 {
- transition-duration: 0ms;
- }
-}
-
-.emotion-20 {
- font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
- font-size: 13px;
-}
-
-.emotion-22 {
- margin-bottom: calc(4px * 2);
-}
-
-.components-panel__row .emotion-22 {
- margin-bottom: inherit;
-}
-
-.emotion-25 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: normal;
- -webkit-box-align: normal;
- -ms-flex-align: normal;
- align-items: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- height: 100%;
- position: relative;
- border-radius: 2px;
- padding-top: 0;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.emotion-25>*+*:not( marquee ) {
- margin-top: 0;
-}
-
-.emotion-25>* {
- min-height: 0;
-}
-
-.emotion-28 {
- display: block;
- max-height: 100%;
- max-width: 100%;
- min-height: 0;
- min-width: 0;
- display: block;
- max-width: calc( 100% - 10px );
-}
-
-.emotion-30 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- box-sizing: border-box;
- border-radius: inherit;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- position: relative;
- background-color: #fff;
- margin: 0!important;
- width: 100%;
-}
-
-.emotion-32.emotion-32.emotion-32 {
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- appearance: none;
- background: transparent;
- box-sizing: border-box;
- border: none;
- box-shadow: none!important;
- color: #000;
- display: block;
- font-family: inherit;
- margin: 0;
- width: 100%;
- font-size: 16px;
- height: 30px;
- line-height: 1;
- min-height: 30px;
- padding-left: 8px;
- padding-right: 24px;
-}
-
-@media ( min-width: 600px ) {
- .emotion-32.emotion-32.emotion-32 {
- font-size: 13px;
- }
-}
-
-.emotion-34 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-self: stretch;
- -ms-flex-item-align: stretch;
- align-self: stretch;
- box-sizing: border-box;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
-}
-
-.emotion-36 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- bottom: 0;
- box-sizing: border-box;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding: 0 4px;
- pointer-events: none;
- position: absolute;
- top: 0;
- right: 0;
-}
-
-.emotion-36 svg {
- display: block;
-}
-
-.emotion-38.emotion-38.emotion-38 {
- box-sizing: border-box;
- border-radius: inherit;
- bottom: 0;
- left: 0;
- margin: 0;
- padding: 0;
- pointer-events: none;
- position: absolute;
- right: 0;
- top: 0;
- border-color: #757575;
- border-style: solid;
- border-width: 1px;
- padding-left: 2px;
-}
-
-
-
-
-
-
-
-
-
-
- Dispute date:
-
-
- Nov 1, 2019
-
-
-
-
- Disputed amount:
-
-
- $10.00
-
-
-
-
- Respond by:
-
-
- Nov 8, 2019 - 2:46AM
-
-
-
-
- Reason:
-
-
- Transaction unauthorized
-
-
-
-
- Transaction ID:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/client/disputes/evidence/test/fields.js b/client/disputes/evidence/test/fields.js
deleted file mode 100644
index 063373bff9d..00000000000
--- a/client/disputes/evidence/test/fields.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/** @format */
-
-/**
- * External dependencies
- */
-import { map, flatMap } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import evidenceFields from '../fields';
-
-// Universal fields.
-const general = {
- key: 'general',
- fields: [
- 'product_description',
- 'customer_name',
- 'customer_email_address',
- 'customer_signature',
- 'billing_address',
- 'customer_purchase_ip',
- 'receipt',
- 'customer_communication',
- ],
-};
-const uncategorized = {
- key: 'uncategorized',
- fields: [ 'uncategorized_text', 'uncategorized_file' ],
-};
-
-// Dispute fields per each dispute category and product type combination.
-const sectionsByReasonAndProductType = {
- credit_not_processed: {
- physical_product: [
- {
- key: 'refund_policy_info',
- fields: [
- 'refund_policy',
- 'refund_policy_disclosure',
- 'refund_refusal_explanation',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'refund_policy_info',
- fields: [
- 'refund_policy',
- 'refund_policy_disclosure',
- 'refund_refusal_explanation',
- ],
- },
- ],
- offline_service: [
- {
- key: 'refund_policy_info',
- fields: [
- 'refund_policy',
- 'refund_policy_disclosure',
- 'refund_refusal_explanation',
- ],
- },
- ],
- },
- duplicate: {
- physical_product: [
- {
- key: 'duplicate_charge_info',
- fields: [
- 'duplicate_charge_id',
- 'duplicate_charge_explanation',
- 'duplicate_charge_documentation',
- 'shipping_documentation',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'duplicate_charge_info',
- fields: [
- 'duplicate_charge_id',
- 'duplicate_charge_explanation',
- 'duplicate_charge_documentation',
- ],
- },
- ],
- offline_service: [
- {
- key: 'duplicate_charge_info',
- fields: [
- 'duplicate_charge_id',
- 'duplicate_charge_explanation',
- 'duplicate_charge_documentation',
- 'service_documentation',
- ],
- },
- ],
- },
- fraudulent: {
- physical_product: [
- {
- key: 'shipping_information',
- fields: [
- 'shipping_carrier',
- 'shipping_tracking_number',
- 'shipping_documentation',
- 'shipping_date',
- 'shipping_address',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'download_and_activity_logs',
- fields: [ 'access_activity_log' ],
- },
- ],
- offline_service: [
- {
- key: 'service_details',
- fields: [ 'service_date', 'service_documentation' ],
- },
- ],
- },
- product_not_received: {
- physical_product: [
- {
- key: 'shipping_information',
- fields: [
- 'shipping_carrier',
- 'shipping_tracking_number',
- 'shipping_documentation',
- 'shipping_date',
- 'shipping_address',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'download_and_activity_logs',
- fields: [ 'access_activity_log' ],
- },
- ],
- offline_service: [
- {
- key: 'service_details',
- fields: [ 'service_date', 'service_documentation' ],
- },
- ],
- },
- product_unacceptable: {
- physical_product: [
- {
- key: 'shipping_information',
- fields: [
- 'shipping_carrier',
- 'shipping_tracking_number',
- 'shipping_documentation',
- 'shipping_date',
- 'shipping_address',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'download_and_activity_logs',
- fields: [ 'access_activity_log' ],
- },
- ],
- offline_service: [
- {
- key: 'service_details',
- fields: [ 'service_date', 'service_documentation' ],
- },
- ],
- },
- subscription_canceled: {
- physical_product: [
- {
- key: 'cancellation_policy_info',
- fields: [
- 'cancellation_policy',
- 'cancellation_policy_disclosure',
- 'cancellation_rebuttal',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'cancellation_policy_info',
- fields: [
- 'cancellation_policy',
- 'cancellation_policy_disclosure',
- 'cancellation_rebuttal',
- ],
- },
- {
- key: 'download_and_activity_logs',
- fields: [ 'access_activity_log' ],
- },
- ],
- offline_service: [
- {
- key: 'cancellation_policy_info',
- fields: [
- 'cancellation_policy',
- 'cancellation_policy_disclosure',
- 'cancellation_rebuttal',
- ],
- },
- {
- key: 'service_details',
- fields: [ 'service_date', 'service_documentation' ],
- },
- ],
- },
- unrecognized: {
- physical_product: [
- {
- key: 'shipping_information',
- fields: [
- 'shipping_carrier',
- 'shipping_tracking_number',
- 'shipping_documentation',
- 'shipping_date',
- 'shipping_address',
- ],
- },
- ],
- digital_product_or_service: [
- {
- key: 'download_and_activity_logs',
- fields: [ 'access_activity_log' ],
- },
- ],
- offline_service: [
- {
- key: 'service_details',
- fields: [ 'service_date', 'service_documentation' ],
- },
- ],
- },
- general: {
- physical_product: [],
- digital_product_or_service: [],
- offline_service: [],
- },
-};
-
-// Convert hierarchical structure into set of tuples accepted by test runner.
-const combinations = flatMap(
- sectionsByReasonAndProductType,
- ( byProductType, reason ) => {
- return map( byProductType, ( sections, productType ) => [
- reason,
- productType,
- sections,
- ] );
- }
-);
-
-describe( 'Dispute evidence fields', () => {
- test( 'with no reason or product type', () => {
- expect( evidenceFields() ).toEqual( [] );
- } );
-
- test.each( combinations )(
- 'when %s with %s',
- ( reason, productType, sections ) => {
- // Distill field data structure, preserving structure and keys.
- const keys = evidenceFields( reason, productType ).map(
- ( section ) => ( {
- key: section.key,
- fields: section.fields.map( ( field ) => field.key ),
- } )
- );
-
- // Verify conditional fields, and that universal fields are above and below.
- expect( keys ).toEqual( [ general, ...sections, uncategorized ] );
- }
- );
-} );
diff --git a/client/disputes/evidence/test/index.js b/client/disputes/evidence/test/index.js
deleted file mode 100644
index 142ee738ab8..00000000000
--- a/client/disputes/evidence/test/index.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/** @format */
-
-/**
- * External dependencies
- */
-import { fireEvent, render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { DisputeEvidenceForm, DisputeEvidencePage } from '../';
-
-jest.mock( 'wcpay/data', () => ( {
- useDisputeEvidence: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/data', () => ( {
- createRegistryControl: jest.fn(),
- dispatch: jest.fn( () => ( {
- setIsMatching: jest.fn(),
- onLoad: jest.fn(),
- } ) ),
- registerStore: jest.fn(),
- select: jest.fn(),
- useDispatch: jest.fn( () => ( { createErrorNotice: jest.fn() } ) ),
- useSelect: jest.fn( () => ( { getNotices: jest.fn() } ) ),
- withDispatch: jest.fn( () => jest.fn() ),
- withSelect: jest.fn( () => jest.fn() ),
-} ) );
-
-const disputeNeedsResponse = {
- id: 'dp_asdfghjkl',
- amount: 1000,
- currency: 'usd',
- created: 1572590800,
- evidence: {
- customer_purchase_ip: '127.0.0.1',
- uncategorized_text: '',
- },
- evidence_details: {
- due_by: 1573199200,
- },
- reason: 'fraudulent',
- status: 'needs_response',
-};
-
-const disputeNoNeedForResponse = {
- id: 'dp_zxcvbnm',
- amount: 1050,
- currency: 'usd',
- created: 1572480800,
- evidence: {
- customer_purchase_ip: '127.0.0.1',
- uncategorized_text: 'winning_evidence',
- },
- evidence_details: {
- due_by: 1573099200,
- },
- reason: 'general',
- status: 'under_review',
-};
-
-const fields = [
- {
- key: 'general',
- title: 'General evidence',
- fields: [
- {
- key: 'product_description',
- label: 'Product description',
- type: 'textarea',
- },
- {
- key: 'customer_name',
- label: 'Customer name',
- type: 'text',
- },
- {
- key: 'customer_signature',
- label: 'Customer signature',
- type: 'file',
- },
- {
- key: 'service_date',
- label: 'Service date',
- type: 'date',
- },
- ],
- },
-];
-
-describe( 'Dispute evidence form', () => {
- beforeEach( () => {
- // mock Date.now that moment library uses to get current date for testing purposes
- Date.now = jest.fn( () => new Date( '2021-06-24T12:33:37.000Z' ) );
-
- global.wcpaySettings = {
- restUrl: 'http://example.com/wp-json/',
- dateFormat: 'M j, Y',
- };
- } );
- afterEach( () => {
- // roll it back
- Date.now = () => new Date();
- } );
- test( 'needing response, renders correctly', () => {
- const { container: form } = render(
-
- );
- expect( form ).toMatchSnapshot();
- } );
-
- test( 'not needing response, renders correctly', () => {
- const { container: form } = render(
-
- );
- expect( form ).toMatchSnapshot();
- } );
-
- test( 'confirmation requested on submit', () => {
- window.confirm = jest.fn();
-
- // We have to mount component to select button for click.
- const { getByRole } = render(
-
- );
-
- const submitButton = getByRole( 'button', { name: /submit.*/i } );
- fireEvent.click( submitButton );
- expect( window.confirm ).toHaveBeenCalledTimes( 1 );
- expect( window.confirm ).toHaveBeenCalledWith(
- "Are you sure you're ready to submit this evidence? Evidence submissions are final."
- );
- } );
-
- test( 'onSave called after confirmation only', () => {
- const onSave = jest.fn();
-
- // We have to mount component to select button for click.
- const { getByRole } = render(
-
- );
-
- const submitButton = getByRole( 'button', { name: /submit.*/i } );
-
- window.confirm = jest.fn();
- window.confirm.mockReturnValueOnce( false ).mockReturnValueOnce( true );
-
- // Test not confirmed case.
- fireEvent.click( submitButton );
- expect( onSave ).toHaveBeenCalledTimes( 0 );
-
- // Test confirmed case.
- fireEvent.click( submitButton );
- expect( onSave ).toHaveBeenCalledTimes( 1 );
- } );
-} );
-
-describe( 'Dispute evidence page', () => {
- beforeEach( () => {
- global.wcpaySettings = {
- zeroDecimalCurrencies: [],
- connect: {
- country: 'US',
- },
- currencyData: {
- US: {
- code: 'USD',
- symbol: '$',
- symbolPosition: 'left',
- thousandSeparator: ',',
- decimalSeparator: '.',
- precision: 2,
- },
- },
- dateFormat: 'M j, Y',
- timeFormat: 'g:iA',
- };
- } );
-
- test( 'renders correctly', () => {
- const { container: form } = render(
-
- );
- expect( form ).toMatchSnapshot();
- } );
-} );
diff --git a/client/disputes/filters/test/__snapshots__/index.tsx.snap b/client/disputes/filters/test/__snapshots__/index.tsx.snap
index 400029f2e80..120acbf057f 100644
--- a/client/disputes/filters/test/__snapshots__/index.tsx.snap
+++ b/client/disputes/filters/test/__snapshots__/index.tsx.snap
@@ -5,7 +5,7 @@ HTMLOptionsCollection [
,
,