Initial commit, sets up logic to show account tools and working on mo…

…dal.

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 && (
-				<h4>{ __( 'Active discounts', 'woocommerce-payments' ) }</h4>
+				<div className="account-fees">
+					<CardDivider />
+					<h4>
+						{ __( 'Active discounts', 'woocommerce-payments' ) }
+					</h4>
+				</div>
 			) }
 			{ activeDiscounts }
 		</>

client/components/account-status/account-fees/styles.scss

@@ -0,0 +1,3 @@
+.account-fees {
+	padding-top: 16px;
+}

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( <ResetAccountModal />, 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 (
+		<div className="account-tools">
+			<CardDivider />
+			<h4>{ strings.title }</h4>
+			<p>{ strings.description }</p>
+			{ /* Use wrapping div to keep buttons grouped together. */ }
+			<div className="account-tools__actions">
+				<Button
+					variant={ 'secondary' }
+					href={ accountLink }
+					target={ '_blank' }
+				>
+					{ strings.finish }
+				</Button>
+				<Button variant={ 'link' } onClick={ resetAccount }>
+					{ strings.reset }
+				</Button>
+			</div>
+		</div>
+	);
+};

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' ),
+};

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;
+	}
+}

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 ) => {
 					}
 				/>
 			</AccountStatusItem>
-			{ ! accountStatus.detailsSubmitted &&
-				! isInTestOrDevMode()( <CardDivider /> ) }
+			{ ! accountStatus.detailsSubmitted && (
+				<AccountTools accountLink={ accountStatus.accountLink } />
+			) }
 			{ accountFees.length > 0 && (
 				<>
-					<CardDivider />
 					<AccountFees accountFees={ accountFees } />
 				</>
 			) }

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 =>

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 (
+		<Modal
+			title={ 'Reset account' }
+			className="wcpay-reset-account-modal"
+			onRequestClose={ () => setModalVisible( false ) }
+		>
+			<div className="wcpay-reset-account-modal__content">
+				<p>{ strings.description }</p>
+				<p>
+					<b>{ strings.beforeContinue }</b>
+				</p>
+				<ol>
+					<li>{ strings.step1 }</li>
+					<li>{ strings.step2 }</li>
+					<li>{ strings.step3 }</li>
+				</ol>
+				<p>{ strings.confirmation }</p>
+			</div>
+			<div className="wcpay-reset-account-modal__footer">
+				<Button
+					variant={ 'secondary' }
+					onClick={ () => setModalVisible( false ) }
+				>
+					{ strings.cancel }
+				</Button>
+				<Button
+					variant={ 'primary' }
+					isDestructive={ true }
+					onClick={ handleReset }
+				>
+					{ strings.reset }
+				</Button>
+			</div>
+		</Modal>
+	);
+};
+
+export default ResetAccountModal;

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' ),
+};

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;
+		}
+	}
+}

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',
 };