Skip to content

Commit

Permalink
Reset Account Management (#7914)
Browse files Browse the repository at this point in the history
Co-authored-by: Oleksandr Aratovskyi <[email protected]>
  • Loading branch information
dmallory42 and oaratovskyi authored Dec 21, 2023
1 parent 9a3237e commit f62ff7e
Show file tree
Hide file tree
Showing 19 changed files with 589 additions and 37 deletions.
4 changes: 4 additions & 0 deletions changelog/dev-3468-allow-reset-account-management
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Add Account Management tools with reset account functionality for partially onboarded accounts.
9 changes: 8 additions & 1 deletion client/components/account-status/account-fees/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 }
</>
Expand Down
3 changes: 3 additions & 0 deletions client/components/account-status/account-fees/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.account-fees {
padding-top: 16px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,20 @@

exports[`AccountFees renders discounted base fee 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down Expand Up @@ -47,9 +58,20 @@ exports[`AccountFees renders discounted base fee 1`] = `

exports[`AccountFees renders discounted fee with USD volume currency and non-USD base fee 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down Expand Up @@ -92,9 +114,20 @@ exports[`AccountFees renders discounted fee with USD volume currency and non-USD

exports[`AccountFees renders discounted fee with end date 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand All @@ -115,9 +148,20 @@ exports[`AccountFees renders discounted fee with end date 1`] = `

exports[`AccountFees renders discounted fee with volume limit 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down Expand Up @@ -160,9 +204,20 @@ exports[`AccountFees renders discounted fee with volume limit 1`] = `

exports[`AccountFees renders discounted fee with volume limit and end date 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down Expand Up @@ -205,9 +260,20 @@ exports[`AccountFees renders discounted fee with volume limit and end date 1`] =

exports[`AccountFees renders discounted fee without volume limit 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand All @@ -223,9 +289,20 @@ exports[`AccountFees renders discounted fee without volume limit 1`] = `

exports[`AccountFees renders discounted non-USD base fee 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down Expand Up @@ -268,9 +345,20 @@ exports[`AccountFees renders discounted non-USD base fee 1`] = `

exports[`AccountFees renders discounts multiple payment methods 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down Expand Up @@ -306,9 +394,20 @@ exports[`AccountFees renders discounts multiple payment methods 1`] = `

exports[`AccountFees renders first discounted fee ignoring the rest 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand All @@ -324,9 +423,20 @@ exports[`AccountFees renders first discounted fee ignoring the rest 1`] = `

exports[`AccountFees renders non-USD base fee 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand All @@ -342,9 +452,20 @@ exports[`AccountFees renders non-USD base fee 1`] = `

exports[`AccountFees renders normal base fee 1`] = `
<div>
<h4>
Active discounts
</h4>
<div
class="account-fees"
>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<h4>
Active discounts
</h4>
</div>
<p>
Card transactions
:
Expand Down
67 changes: 67 additions & 0 deletions client/components/account-status/account-tools/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* External dependencies
*/
import React, { useState } from 'react';
import { Button, CardDivider } from '@wordpress/components';
import { addQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
*/
import strings from './strings';
import { isInDevMode } from 'utils';
import './styles.scss';
import ResetAccountModal from 'wcpay/overview/modal/reset-account';
import { trackAccountReset } from 'wcpay/onboarding/tracking';

interface Props {
accountLink: string;
openModal: () => void;
}

const handleReset = () => {
trackAccountReset();

window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
'wcpay-reset-account': true,
} );
};

export const AccountTools: React.FC< Props > = ( props: Props ) => {
const accountLink = props.accountLink;
const [ modalVisible, setModalVisible ] = useState( false );

if ( isInDevMode() ) 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={ 'tertiary' }
onClick={ () => setModalVisible( true ) }
>
{ strings.reset }
</Button>
</div>
</div>

<ResetAccountModal
isVisible={ modalVisible }
onDismiss={ () => setModalVisible( false ) }
onSubmit={ handleReset }
/>
</>
);
};
15 changes: 15 additions & 0 deletions client/components/account-status/account-tools/strings.tsx
Original file line number Diff line number Diff line change
@@ -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' ),
};
11 changes: 11 additions & 0 deletions client/components/account-status/account-tools/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.account-tools {
padding-top: $gap;

&__actions {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: $gap-small;
margin-top: $gap-small;
}
}
Loading

0 comments on commit f62ff7e

Please sign in to comment.