Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design improvements related to the overview page #10214

Merged
merged 11 commits into from
Jan 27, 2025
Merged

Design improvements related to the overview page #10214

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
04db0a9
Add changelog
Jan 22, 2025
3472a43
Check payments and deposits enabled when showing success modal
Jan 23, 2025
09e2e5e
Add HoverTooltip to the deposits suspended notice
Jan 23, 2025
eac70b7
Merge branch 'develop' into update/9811-design-improvements-overview-…
oaratovskyi Jan 23, 2025
a9aded5
Fix snapshot tests
Jan 23, 2025
c697690
Merge remote-tracking branch 'origin/update/9811-design-improvements-…
Jan 23, 2025
5dacdad
Address PR feedback
Jan 24, 2025
31b3a5f
Change size of the icon
Jan 24, 2025
4cd7969
update snapshot
Jan 24, 2025
451eada
Change HoverTooltip to ClickTooltip
Jan 24, 2025
76e09d4
update snapshot
Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/update-9811-design-improvements-overview-page
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: update

Design improvements related to the overview page
64 changes: 43 additions & 21 deletions client/components/deposits-status/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@
* External dependencies
*/
import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
import HelpOutlineIcon from 'gridicons/dist/help-outline';
import GridiconNotice from 'gridicons/dist/notice';
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import interpolateComponents from '@automattic/interpolate-components';
import React from 'react';

/**
* Internal dependencies
*/
import 'components/account-status/shared.scss';
import { HoverTooltip } from 'wcpay/components/tooltip';
import type { AccountStatus } from 'wcpay/types/account/account-status';

type DepositsStatus = 'enabled' | 'disabled' | 'blocked';
Expand Down Expand Up @@ -62,31 +64,51 @@ const DepositsStatusDisabled: React.FC< DepositsStatusProps > = ( props ) => {
const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => {
const { iconSize } = props;

const learnMoreHref =
'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/';

const description = createInterpolateElement(
const description =
/* translators: <a> - suspended accounts FAQ URL */
__(
'Temporarily suspended (<a>learn more</a>)',
'woocommerce-payments'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ learnMoreHref }
target="_blank"
rel="noopener noreferrer"
/>
),
}
);
__( 'Temporarily suspended', 'woocommerce-payments' );

return (
<span className={ 'account-status__info__yellow' }>
<GridiconNotice size={ iconSize } />
{ description }
<HoverTooltip
className="wcpay-tooltip--click__tooltip"
maxWidth={ '300px' }
content={ interpolateComponents( {
mixedString: sprintf(
/* translators: 1: WooPayments */
__(
// eslint-disable-next-line max-len
'After the information review your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
oaratovskyi marked this conversation as resolved.
Show resolved Hide resolved
'woocommerce-payments'
),
'WooPayments'
),
components: {
learnMoreLink: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={
// eslint-disable-next-line max-len
'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/'
}
target="_blank"
rel="noreferrer"
type="external"
/>
),
},
} ) }
>
<div
tabIndex={ 0 }
role="button"
aria-label="Learn more about deposits suspended"
>
<HelpOutlineIcon />
</div>
</HoverTooltip>
</span>
);
};
Expand Down
108 changes: 84 additions & 24 deletions client/components/deposits-status/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,35 @@ exports[`DepositsStatus renders blocked status 1`] = `
/>
</g>
</svg>
Temporarily suspended (
<a
href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
rel="noopener noreferrer"
target="_blank"
Temporarily suspended
<button
class="wcpay-tooltip__content-wrapper"
type="button"
>
learn more
</a>
)
<div
class="wcpay-tooltip__content-wrapper"
>
<div
aria-label="Learn more about deposits suspended"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
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"
/>
</g>
</svg>
</div>
</div>
</button>
</span>
</div>
`;
Expand All @@ -49,15 +69,35 @@ exports[`DepositsStatus renders blocked status 2`] = `
/>
</g>
</svg>
Temporarily suspended (
<a
href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
rel="noopener noreferrer"
target="_blank"
Temporarily suspended
<button
class="wcpay-tooltip__content-wrapper"
type="button"
>
learn more
</a>
)
<div
class="wcpay-tooltip__content-wrapper"
>
<div
aria-label="Learn more about deposits suspended"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
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"
/>
</g>
</svg>
</div>
</div>
</button>
</span>
</div>
`;
Expand Down Expand Up @@ -172,15 +212,35 @@ exports[`DepositsStatus renders pending verification status 1`] = `
/>
</g>
</svg>
Temporarily suspended (
<a
href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
rel="noopener noreferrer"
target="_blank"
Temporarily suspended
<button
class="wcpay-tooltip__content-wrapper"
type="button"
>
learn more
</a>
)
<div
class="wcpay-tooltip__content-wrapper"
>
<div
aria-label="Learn more about deposits suspended"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
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"
/>
</g>
</svg>
</div>
</div>
</button>
</span>
</div>
`;
Expand Down
4 changes: 4 additions & 0 deletions client/overview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ const OverviewPage = () => {
const accountRejected =
accountStatus.status && accountStatus.status.startsWith( 'rejected' );
const accountUnderReview = accountStatus.status === 'under_review';
const paymentsEnabled = accountStatus.paymentsEnabled;
const depositsEnabled = accountStatus.deposits?.status === 'enabled';

const showConnectionSuccess =
queryParams[ 'wcpay-connection-success' ] === '1';
Expand All @@ -119,6 +121,8 @@ const OverviewPage = () => {
const showConnectionSuccessModal =
showConnectionSuccess &&
! isTestModeOnboarding &&
paymentsEnabled &&
depositsEnabled &&
isPoDisabledOrCompleted;

const activeAccountFees = Object.entries( wcpaySettings.accountFees )
Expand Down
Loading