Skip to content

Commit 65869c9

Browse files
oaratovskyioaratovskyi
oaratovskyi
and
oaratovskyi
authored
Design improvements related to the overview page (#10214)
Co-authored-by: oaratovskyi <[email protected]>
1 parent 9376ce0 commit 65869c9

File tree

4 files changed

+131
-45
lines changed

4 files changed

+131
-45
lines changed

‎changelog/update-9811-design-improvements-overview-page

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: patch
2+
Type: update
3+
4+
Design improvements related to the overview page

‎client/components/deposits-status/index.tsx

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
* External dependencies
55
*/
66
import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
7+
import HelpOutlineIcon from 'gridicons/dist/help-outline';
78
import GridiconNotice from 'gridicons/dist/notice';
8-
import { __ } from '@wordpress/i18n';
9-
import { createInterpolateElement } from '@wordpress/element';
9+
import { __, sprintf } from '@wordpress/i18n';
10+
import interpolateComponents from '@automattic/interpolate-components';
1011
import React from 'react';
1112

1213
/**
1314
* Internal dependencies
1415
*/
1516
import 'components/account-status/shared.scss';
17+
import { ClickTooltip } from 'wcpay/components/tooltip';
1618
import type { AccountStatus } from 'wcpay/types/account/account-status';
1719

1820
type DepositsStatus = 'enabled' | 'disabled' | 'blocked';
@@ -62,31 +64,47 @@ const DepositsStatusDisabled: React.FC< DepositsStatusProps > = ( props ) => {
6264
const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => {
6365
const { iconSize } = props;
6466

65-
const learnMoreHref =
66-
'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/';
67-
68-
const description = createInterpolateElement(
67+
const description =
6968
/* translators: <a> - suspended accounts FAQ URL */
70-
__(
71-
'Temporarily suspended (<a>learn more</a>)',
72-
'woocommerce-payments'
73-
),
74-
{
75-
a: (
76-
// eslint-disable-next-line jsx-a11y/anchor-has-content
77-
<a
78-
href={ learnMoreHref }
79-
target="_blank"
80-
rel="noopener noreferrer"
81-
/>
82-
),
83-
}
84-
);
69+
__( 'Temporarily suspended', 'woocommerce-payments' );
8570

8671
return (
8772
<span className={ 'account-status__info__yellow' }>
8873
<GridiconNotice size={ iconSize } />
8974
{ description }
75+
<ClickTooltip
76+
maxWidth={ '300px' }
77+
buttonIcon={ <HelpOutlineIcon /> }
78+
buttonLabel={ __(
79+
'Learn more about payouts suspended',
80+
'woocommerce-payments'
81+
) }
82+
content={ interpolateComponents( {
83+
mixedString: sprintf(
84+
/* translators: 1: WooPayments */
85+
__(
86+
// eslint-disable-next-line max-len
87+
'After the information review, your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
88+
'woocommerce-payments'
89+
),
90+
'WooPayments'
91+
),
92+
components: {
93+
learnMoreLink: (
94+
// eslint-disable-next-line jsx-a11y/anchor-has-content
95+
<a
96+
href={
97+
// eslint-disable-next-line max-len
98+
'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/'
99+
}
100+
target="_blank"
101+
rel="noreferrer"
102+
type="external"
103+
/>
104+
),
105+
},
106+
} ) }
107+
/>
90108
</span>
91109
);
92110
};

‎client/components/deposits-status/test/__snapshots__/index.js.snap

Lines changed: 84 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,35 @@ exports[`DepositsStatus renders blocked status 1`] = `
1818
/>
1919
</g>
2020
</svg>
21-
Temporarily suspended (
22-
<a
23-
href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
24-
rel="noopener noreferrer"
25-
target="_blank"
21+
Temporarily suspended
22+
<button
23+
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
24+
type="button"
2625
>
27-
learn more
28-
</a>
29-
)
26+
<div
27+
class="wcpay-tooltip__content-wrapper"
28+
>
29+
<div
30+
aria-label="Learn more about payouts suspended"
31+
role="button"
32+
tabindex="0"
33+
>
34+
<svg
35+
class="gridicon gridicons-help-outline"
36+
height="16"
37+
viewBox="0 0 24 24"
38+
width="16"
39+
xmlns="http://www.w3.org/2000/svg"
40+
>
41+
<g>
42+
<path
43+
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
44+
/>
45+
</g>
46+
</svg>
47+
</div>
48+
</div>
49+
</button>
3050
</span>
3151
</div>
3252
`;
@@ -49,15 +69,35 @@ exports[`DepositsStatus renders blocked status 2`] = `
4969
/>
5070
</g>
5171
</svg>
52-
Temporarily suspended (
53-
<a
54-
href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
55-
rel="noopener noreferrer"
56-
target="_blank"
72+
Temporarily suspended
73+
<button
74+
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
75+
type="button"
5776
>
58-
learn more
59-
</a>
60-
)
77+
<div
78+
class="wcpay-tooltip__content-wrapper"
79+
>
80+
<div
81+
aria-label="Learn more about payouts suspended"
82+
role="button"
83+
tabindex="0"
84+
>
85+
<svg
86+
class="gridicon gridicons-help-outline"
87+
height="16"
88+
viewBox="0 0 24 24"
89+
width="16"
90+
xmlns="http://www.w3.org/2000/svg"
91+
>
92+
<g>
93+
<path
94+
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
95+
/>
96+
</g>
97+
</svg>
98+
</div>
99+
</div>
100+
</button>
61101
</span>
62102
</div>
63103
`;
@@ -172,15 +212,35 @@ exports[`DepositsStatus renders pending verification status 1`] = `
172212
/>
173213
</g>
174214
</svg>
175-
Temporarily suspended (
176-
<a
177-
href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
178-
rel="noopener noreferrer"
179-
target="_blank"
215+
Temporarily suspended
216+
<button
217+
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
218+
type="button"
180219
>
181-
learn more
182-
</a>
183-
)
220+
<div
221+
class="wcpay-tooltip__content-wrapper"
222+
>
223+
<div
224+
aria-label="Learn more about payouts suspended"
225+
role="button"
226+
tabindex="0"
227+
>
228+
<svg
229+
class="gridicon gridicons-help-outline"
230+
height="16"
231+
viewBox="0 0 24 24"
232+
width="16"
233+
xmlns="http://www.w3.org/2000/svg"
234+
>
235+
<g>
236+
<path
237+
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
238+
/>
239+
</g>
240+
</svg>
241+
</div>
242+
</div>
243+
</button>
184244
</span>
185245
</div>
186246
`;

‎client/overview/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ const OverviewPage = () => {
9393
const accountRejected =
9494
accountStatus.status && accountStatus.status.startsWith( 'rejected' );
9595
const accountUnderReview = accountStatus.status === 'under_review';
96+
const paymentsEnabled = accountStatus.paymentsEnabled;
97+
const depositsEnabled = accountStatus.deposits?.status === 'enabled';
9698

9799
const showConnectionSuccess =
98100
queryParams[ 'wcpay-connection-success' ] === '1';
@@ -119,6 +121,8 @@ const OverviewPage = () => {
119121
const showConnectionSuccessModal =
120122
showConnectionSuccess &&
121123
! isTestModeOnboarding &&
124+
paymentsEnabled &&
125+
depositsEnabled &&
122126
isPoDisabledOrCompleted;
123127

124128
const activeAccountFees = Object.entries( wcpaySettings.accountFees )

0 commit comments

Comments
 (0)