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

+
    +
  1. { strings.step1 }
  2. +
  3. { strings.step2 }
  4. +
  5. { strings.step3 }
  6. +
+

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