Render a notice when the available balance is below the minimum depos…

…it threshold (#7710) Co-authored-by: Bruce Aldridge <[email protected]> Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Francesco <[email protected]> Co-authored-by: Miguel Gasca <[email protected]> Co-authored-by: Guilherme Pressutto <[email protected]> Co-authored-by: Malith Senaweera <[email protected]> Co-authored-by: Shendy <[email protected]> Co-authored-by: Allie Mims <[email protected]> Co-authored-by: Alefe Souza <[email protected]> Co-authored-by: César Costa <[email protected]> Co-authored-by: Valery Sukhomlinov <[email protected]> Co-authored-by: Jesse Pearson <[email protected]> Co-authored-by: Timur Karimov <[email protected]> Co-authored-by: Timur Karimov <[email protected]> Co-authored-by: Anurag Bhandari <[email protected]> Co-authored-by: Cvetan Cvetanov <[email protected]> Co-authored-by: Naman Malhotra <[email protected]> Co-authored-by: Dan Paun <[email protected]> Co-authored-by: Mike Moore <[email protected]> Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Matt Allan <[email protected]> Co-authored-by: Dan Paun <[email protected]> Co-authored-by: Oleksandr Aratovskyi <[email protected]> Co-authored-by: oaratovskyi <[email protected]> Co-authored-by: Daniel Mallory <[email protected]> Co-authored-by: Vlad Olaru <[email protected]> Co-authored-by: Zvonimir Maglica <[email protected]> Co-authored-by: Ismael Martín Alabarce <[email protected]> Co-authored-by: Vlad Olaru <[email protected]> Co-authored-by: Brent MacKinnon <[email protected]> Co-authored-by: frosso <[email protected]> Co-authored-by: Rafael Zaleski <[email protected]> Co-authored-by: Brian Borman <[email protected]> Co-authored-by: Achyuth Ajoy <[email protected]> Co-authored-by: Hector Lovo <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: botwoo <[email protected]> Co-authored-by: Ricardo Metring <[email protected]>
Automattic · Feb 5, 2024 · 37ef892 · 37ef892
1 parent 02194d1
commit 37ef892
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 1 deletion.
diff --git a/changelog/fix-6774-deposit-minimum-threshold-ui b/changelog/fix-6774-deposit-minimum-threshold-ui
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Show a notice to the merchant when the available balance is below the minimum deposit amount.
diff --git a/client/components/deposits-overview/deposit-notices.tsx b/client/components/deposits-overview/deposit-notices.tsx
@@ -151,6 +151,42 @@ export const NegativeBalanceDepositsPausedNotice: React.FC = () => (
 	</InlineNotice>
 );
 
+/**
+ * Renders a notice informing the user that their available balance is below the minimum deposit threshold.
+ */
+export const DepositMinimumBalanceNotice: React.FC< {
+	/**
+	 * The minimum deposit amount formatted as a currency string (e.g. $5.00 USD).
+	 */
+	minimumDepositAmountFormatted: string;
+} > = ( { minimumDepositAmountFormatted } ) => {
+	return (
+		<InlineNotice status="warning" icon isDismissible={ false }>
+			{ interpolateComponents( {
+				mixedString: sprintf(
+					/* translators: %s: a formatted currency amount, e.g. $5.00 USD */
+					__(
+						'Deposits are paused while your available funds balance remains below %s. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+						'woocommerce-payments'
+					),
+					minimumDepositAmountFormatted
+				),
+				components: {
+					learnMoreLink: (
+						// Link content is in the format string above.
+						// eslint-disable-next-line jsx-a11y/anchor-has-content
+						<a
+							target="_blank"
+							rel="noopener noreferrer"
+							href="https://woo.com/document/woopayments/deposits/deposit-schedule/#minimum-deposit-amounts"
+						/>
+					),
+				},
+			} ) }
+		</InlineNotice>
+	);
+};
+
 /**
  * Renders a notice informing the user that deposits only occur when there are funds available.
  */

diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx
@@ -15,12 +15,14 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies.
  */
 import { getAdminUrl } from 'wcpay/utils';
+import { formatExplicitCurrency } from 'wcpay/utils/currency';
 import { recordEvent, events } from 'tracks';
 import Loadable from 'components/loadable';
 import { useSelectedCurrencyOverview } from 'wcpay/overview/hooks';
 import RecentDepositsList from './recent-deposits-list';
 import DepositSchedule from './deposit-schedule';
 import {
+	DepositMinimumBalanceNotice,
 	DepositTransitDaysNotice,
 	NegativeBalanceDepositsPausedNotice,
 	NewAccountWaitingPeriodNotice,
@@ -50,6 +52,10 @@ const DepositsOverview: React.FC = () => {
 	const availableFunds = overview?.available?.amount ?? 0;
 	const pendingFunds = overview?.pending?.amount ?? 0;
 
+	const minimumDepositAmount =
+		wcpaySettings.accountStatus.deposits
+			?.minimum_scheduled_deposit_amounts?.[ selectedCurrency ] ?? 0;
+	const isAboveMinimumDepositAmount = availableFunds >= minimumDepositAmount;
 	// If the available balance is negative, deposits may be paused.
 	const isNegativeBalanceDepositsPaused = availableFunds < 0;
 	// When there are funds pending but no available funds, deposits are paused.
@@ -135,6 +141,15 @@ const DepositsOverview: React.FC = () => {
 						{ isNegativeBalanceDepositsPaused && (
 							<NegativeBalanceDepositsPausedNotice />
 						) }
+						{ availableFunds > 0 &&
+							! isAboveMinimumDepositAmount && (
+								<DepositMinimumBalanceNotice
+									minimumDepositAmountFormatted={ formatExplicitCurrency(
+										minimumDepositAmount,
+										selectedCurrency
+									) }
+								/>
+							) }
 					</>
 				) }
 			</CardBody>

diff --git a/client/components/deposits-overview/test/index.tsx b/client/components/deposits-overview/test/index.tsx
@@ -53,6 +53,9 @@ declare const global: {
 			deposits: {
 				restrictions: string;
 				completed_waiting_period: boolean;
+				minimum_scheduled_deposit_amounts: {
+					[ currencyCode: string ]: number;
+				};
 			};
 		};
 		accountDefaultCurrency: string;
@@ -195,6 +198,10 @@ describe( 'Deposits Overview information', () => {
 				deposits: {
 					restrictions: 'deposits_unrestricted',
 					completed_waiting_period: true,
+					minimum_scheduled_deposit_amounts: {
+						eur: 500,
+						usd: 500,
+					},
 				},
 			},
 			accountDefaultCurrency: 'USD',
@@ -548,3 +555,54 @@ describe( 'Paused Deposit notice Renders', () => {
 		expect( queryByText( /Deposits may be interrupted/ ) ).toBeFalsy();
 	} );
 } );
+
+describe( 'Minimum Deposit Amount Notice', () => {
+	beforeAll( () => {
+		mockUseDeposits.mockReturnValue( {
+			depositsCount: 0,
+			deposits: [],
+			isLoading: false,
+		} );
+	} );
+
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'When available balance is below the minimum threshold', () => {
+		const accountOverview = createMockNewAccountOverview( 'eur', 100, 100 );
+		mockOverviews( [ accountOverview ] );
+		mockDepositOverviews( [ accountOverview ] );
+
+		mockUseSelectedCurrency.mockReturnValue( {
+			selectedCurrency: 'eur',
+			setSelectedCurrency: mockSetSelectedCurrency,
+		} );
+
+		const { getByText } = render( <DepositsOverview /> );
+		getByText(
+			/Deposits are paused while your available funds balance remains below €5.00/,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
+	} );
+
+	test( 'When available balance is above the minimum threshold', () => {
+		const accountOverview = createMockNewAccountOverview( 'eur', 100, 500 );
+		mockOverviews( [ accountOverview ] );
+		mockDepositOverviews( [ accountOverview ] );
+
+		mockUseSelectedCurrency.mockReturnValue( {
+			selectedCurrency: 'eur',
+			setSelectedCurrency: mockSetSelectedCurrency,
+		} );
+
+		const { queryByText } = render( <DepositsOverview /> );
+		expect(
+			queryByText(
+				/Deposits are paused while your available funds balance remains below/
+			)
+		).toBeFalsy();
+	} );
+} );
diff --git a/client/components/inline-notice/styles.scss b/client/components/inline-notice/styles.scss
@@ -31,6 +31,11 @@
 	.components-notice__content {
 		margin-top: 2px;
 		margin-bottom: 2px;
+
+		// Ensure links don't wrap across lines, e.g. "Learn (newline) more".
+		a {
+			white-space: nowrap;
+		}
 	}
 	.wcpay-inline-notice__content__actions {
 		padding-top: 12px;

diff --git a/client/globals.d.ts b/client/globals.d.ts
@@ -40,7 +40,8 @@ declare global {
 				monthly_anchor: null | number;
 				delay_days: null | number;
 				completed_waiting_period: boolean;
-				minimum_deposit_amounts: Record< string, number >;
+				minimum_manual_deposit_amounts: Record< string, number >;
+				minimum_scheduled_deposit_amounts: Record< string, number >;
 			};
 			depositsStatus?: string;
 			currentDeadline?: bigint;