diff --git a/client/components/account-status/account-fees/index.js b/client/components/account-status/account-fees/index.js
index 066a4faf1b3..93a93293c11 100644
--- a/client/components/account-status/account-fees/index.js
+++ b/client/components/account-status/account-fees/index.js
@@ -16,6 +16,8 @@ import {
getCurrentBaseFee,
getTransactionsPaymentMethodName,
} from 'utils/account-fees';
+import { CardDivider } from '@wordpress/components';
+import './styles.scss';
const AccountFee = ( props ) => {
const { accountFee, paymentMethod } = props;
@@ -59,7 +61,12 @@ const AccountFees = ( props ) => {
return (
<>
{ haveDiscounts && (
-
{ __( 'Active discounts', 'woocommerce-payments' ) }
+
+
+
+ { __( 'Active discounts', 'woocommerce-payments' ) }
+
+
) }
{ activeDiscounts }
>
diff --git a/client/components/account-status/account-fees/styles.scss b/client/components/account-status/account-fees/styles.scss
new file mode 100644
index 00000000000..9938ef462b1
--- /dev/null
+++ b/client/components/account-status/account-fees/styles.scss
@@ -0,0 +1,3 @@
+.account-fees {
+ padding-top: 16px;
+}
diff --git a/client/components/account-status/account-tools/index.tsx b/client/components/account-status/account-tools/index.tsx
new file mode 100644
index 00000000000..6a61cef0a19
--- /dev/null
+++ b/client/components/account-status/account-tools/index.tsx
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import strings from './strings';
+import { isInTestOrDevMode } from 'utils';
+import { Button, CardDivider } from '@wordpress/components';
+import './styles.scss';
+import ResetAccountModal from 'wcpay/overview/modal/reset-account';
+
+interface Props {
+ accountLink: string;
+ openModal: () => void;
+}
+
+const renderModal = () => {
+ let container = document.querySelector( '#wcpay-reset-account-container' );
+
+ if ( ! container ) {
+ container = document.createElement( 'div' );
+ container.id = 'wcpay-reset-account-container';
+ document.body.appendChild( container );
+ }
+
+ render( , container );
+};
+
+const resetAccount = () => {
+ // TODO: Should we have a generic function for rendering a modal in utils?
+ renderModal();
+};
+
+export const AccountTools: React.FC< Props > = ( props: Props ) => {
+ const accountLink = props.accountLink;
+ const [ modalVisible, setModalVisible ] = useState( true );
+
+ // if ( isInTestOrDevMode() ) return null;
+
+ return (
+
+
+
{ strings.title }
+
{ strings.description }
+ { /* Use wrapping div to keep buttons grouped together. */ }
+
+
+
+
+
+ );
+};
diff --git a/client/components/account-status/account-tools/strings.tsx b/client/components/account-status/account-tools/strings.tsx
new file mode 100644
index 00000000000..47c668d0a88
--- /dev/null
+++ b/client/components/account-status/account-tools/strings.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable max-len */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+ title: __( 'Account Tools', 'woocommerce-payments' ),
+ description: __(
+ 'Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.',
+ 'woocommerce-payments'
+ ),
+ finish: __( 'Finish setup', 'woocommerce-payments' ),
+ reset: __( 'Reset account', 'woocommerce-payments' ),
+};
diff --git a/client/components/account-status/account-tools/styles.scss b/client/components/account-status/account-tools/styles.scss
new file mode 100644
index 00000000000..ee7cbbe19bf
--- /dev/null
+++ b/client/components/account-status/account-tools/styles.scss
@@ -0,0 +1,11 @@
+.account-tools {
+ padding-top: 16px;
+
+ &__actions {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: max-content;
+ column-gap: $gap-small;
+ margin-top: $gap-small;
+ }
+}
diff --git a/client/components/account-status/index.js b/client/components/account-status/index.js
index ffb857fb95c..719107a2fa5 100755
--- a/client/components/account-status/index.js
+++ b/client/components/account-status/index.js
@@ -7,7 +7,6 @@ import {
Button,
Card,
CardBody,
- CardDivider,
CardHeader,
FlexBlock,
FlexItem,
@@ -24,7 +23,7 @@ import PaymentsStatus from 'components/payments-status';
import StatusChip from './status-chip';
import './style.scss';
import './shared.scss';
-import { isInTestOrDevMode } from 'wcpay/utils';
+import { AccountTools } from './account-tools';
const AccountStatusCard = ( props ) => {
const { title, children, value } = props;
@@ -104,11 +103,11 @@ const AccountStatusDetails = ( props ) => {
}
/>
- { ! accountStatus.detailsSubmitted &&
- ! isInTestOrDevMode()( ) }
+ { ! accountStatus.detailsSubmitted && (
+
+ ) }
{ accountFees.length > 0 && (
<>
-
>
) }
diff --git a/client/onboarding/tracking.ts b/client/onboarding/tracking.ts
index 3a083eeb64b..66ea41ebf60 100644
--- a/client/onboarding/tracking.ts
+++ b/client/onboarding/tracking.ts
@@ -57,6 +57,9 @@ export const trackRedirected = ( isEligible: boolean ): void => {
} );
};
+export const trackAccountReset = (): void =>
+ wcpayTracks.recordEvent( wcpayTracks.events.ONBOARDING_FLOW_RESET, {} );
+
export const trackEligibilityModalClosed = (
action: 'dismiss' | 'setup_deposits' | 'enable_payments_only'
): void =>
diff --git a/client/overview/modal/reset-account/index.tsx b/client/overview/modal/reset-account/index.tsx
new file mode 100644
index 00000000000..403c65f70b8
--- /dev/null
+++ b/client/overview/modal/reset-account/index.tsx
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { Button, Modal } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { trackAccountReset } from 'onboarding/tracking';
+import './style.scss';
+import strings from './strings';
+
+const ResetAccountModal: React.FC = () => {
+ const [ modalVisible, setModalVisible ] = useState( true );
+
+ const handleReset = () => {
+ trackAccountReset();
+
+ // // Note: we don't need to update the option here because it will be handled upon redirect to the connect URL.
+ // window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
+ // collect_payout_requirements: true,
+ // } );
+ };
+
+ if ( ! modalVisible ) return null;
+
+ return (
+ setModalVisible( false ) }
+ >
+
+
{ strings.description }
+
+ { strings.beforeContinue }
+
+
+ - { strings.step1 }
+ - { strings.step2 }
+ - { strings.step3 }
+
+
{ strings.confirmation }
+
+
+
+
+
+
+ );
+};
+
+export default ResetAccountModal;
diff --git a/client/overview/modal/reset-account/strings.tsx b/client/overview/modal/reset-account/strings.tsx
new file mode 100644
index 00000000000..3b378ce10cb
--- /dev/null
+++ b/client/overview/modal/reset-account/strings.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable max-len */
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+export default {
+ title: __( 'Reset account', 'woocommerce-payments' ),
+ description: __(
+ 'If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.',
+ 'woocommerce-payments'
+ ),
+ beforeContinue: __( 'Before you continue', 'woocommerce-payments' ),
+ step1: sprintf(
+ /* translators: %s: WooPayments. */
+ __(
+ 'Your %s account will be reset, and all data will be lost.',
+ 'woocommerce-payments'
+ ),
+ 'WooPayments'
+ ),
+ step2: __(
+ 'You will have to re-confirm your business and banking details.',
+ 'woocommerce-payments'
+ ),
+ step3: __( 'This action cannnot be undone.', 'woocommerce-payments' ),
+ confirmation: __(
+ 'Are you sure you want to continue?',
+ 'woocommerce-payments'
+ ),
+ cancel: __( 'Cancel', 'woocommerce-payments' ),
+ reset: __( 'Yes, reset account', 'woocommerce-payments' ),
+};
diff --git a/client/overview/modal/reset-account/style.scss b/client/overview/modal/reset-account/style.scss
new file mode 100644
index 00000000000..23226d2f396
--- /dev/null
+++ b/client/overview/modal/reset-account/style.scss
@@ -0,0 +1,33 @@
+.wcpay-reset-account-modal {
+ // fix for the modal being too short on smaller screens
+ @media ( max-height: 880px ) {
+ max-height: 100% !important;
+ }
+
+ .components-modal__content {
+ box-sizing: border-box;
+ max-width: 700px;
+ margin: 0 auto;
+ padding: $gap-larger;
+ }
+
+ // &__heading {
+ // @include wp-title-large;
+ // text-align: left;
+ // margin-bottom: 0;
+ // }
+
+ &__footer {
+ text-align: right;
+ margin-top: $gap-large;
+
+ & :first-child {
+ margin-right: $gap-smaller;
+ }
+
+ button {
+ margin-top: $gap;
+ padding: $gap-smaller $gap;
+ }
+ }
+}
diff --git a/client/overview/modal/reset-account/test/index.test.tsx b/client/overview/modal/reset-account/test/index.test.tsx
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/client/tracks/index.js b/client/tracks/index.js
index c02615f781d..c862f189954 100644
--- a/client/tracks/index.js
+++ b/client/tracks/index.js
@@ -124,6 +124,7 @@ const events = {
ONBOARDING_FLOW_HIDDEN: 'wcpay_onboarding_flow_hidden',
ONBOARDING_FLOW_EXITED: 'wcpay_onboarding_flow_exited',
ONBOARDING_FLOW_REDIRECTED: 'wcpay_onboarding_flow_redirected',
+ ONBOARDING_FLOW_RESET: 'wcpay_onboarding_flow_reset',
ONBOARDING_FLOW_ELIGIBILITY_MODAL_CLOSED:
'wcpay_onboarding_flow_eligibility_modal_closed',
};