Instant Deposits: Show amount on a notice and button label (#8970)

Co-authored-by: Nagesh Pai <nagesh.pai@automattic.com>
Co-authored-by: Rua Haszard <rua.haszard@automattic.com>

changelog/fix-8220-instant-deposit-messaging

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Clearly display available instant deposit amount on notice and button label on Payment Overview page

client/components/account-balances/index.tsx

@@ -1,31 +1,63 @@
 /**
  * External dependencies
  */
-import * as React from 'react';
+import React, { useState } from 'react';
+import { useDispatch } from '@wordpress/data';
 import { Flex } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
+import { Link } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
-import { useAllDepositsOverviews } from 'wcpay/data';
-import { useSelectedCurrency } from 'wcpay/overview/hooks';
+import type * as AccountOverview from 'wcpay/types/account-overview';
 import BalanceBlock from './balance-block';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
+import InlineNotice from '../inline-notice';
+import InstantDepositButton from 'deposits/instant-deposits';
+import SendMoneyIcon from 'assets/images/icons/send-money.svg?asset';
 import {
 	TotalBalanceTooltip,
 	AvailableBalanceTooltip,
 } from './balance-tooltip';
 import { fundLabelStrings } from './strings';
-import InstantDepositButton from 'deposits/instant-deposits';
-import type * as AccountOverview from 'wcpay/types/account-overview';
+import { ClickTooltip } from '../tooltip';
+import { formatCurrency } from 'wcpay/utils/currency';
+import { useAllDepositsOverviews } from 'wcpay/data';
+import { useSelectedCurrency } from 'wcpay/overview/hooks';
 import './style.scss';
 
+const useInstantDepositNoticeState = () => {
+	const { updateOptions } = useDispatch( 'wc/admin/options' );
+	const [ isDismissed, setIsDismissed ] = useState(
+		wcpaySettings.isInstantDepositNoticeDismissed
+	);
+
+	const setInstantDepositNoticeDismissed = () => {
+		setIsDismissed( true );
+		wcpaySettings.isInstantDepositNoticeDismissed = true;
+		updateOptions( { wcpay_instant_deposit_notice_dismissed: true } );
+	};
+
+	return {
+		isInstantDepositNoticeDismissed: isDismissed,
+		handleDismissInstantDepositNotice: setInstantDepositNoticeDismissed,
+	};
+};
+
 /**
  * Renders account balances for the selected currency.
  */
 const AccountBalances: React.FC = () => {
 	const { overviews, isLoading } = useAllDepositsOverviews();
 	const { selectedCurrency } = useSelectedCurrency();
 
+	const {
+		isInstantDepositNoticeDismissed,
+		handleDismissInstantDepositNotice,
+	} = useInstantDepositNoticeState();
+
 	if ( ! isLoading && overviews.currencies.length === 0 ) {
 		return null;
 	}
@@ -108,10 +140,77 @@ const AccountBalances: React.FC = () => {
 					<Flex
 						gap={ 0 }
 						className="wcpay-account-balances__instant-deposit"
+						direction="column"
+						align="start"
 					>
-						<InstantDepositButton
-							instantBalance={ selectedOverview.instantBalance }
-						/>
+						{ ! isInstantDepositNoticeDismissed && (
+							<InlineNotice
+								className="wcpay-account-balances__instant-deposit-notice"
+								icon={ <img src={ SendMoneyIcon } alt="" /> }
+								isDismissible={ true }
+								onRemove={ () =>
+									handleDismissInstantDepositNotice()
+								}
+							>
+								{ sprintf(
+									__(
+										/* translators: %$1$s: Available instant deposit amount, %2$s: Instant deposit fee percentage */
+										/* 'Instantly deposit %1$s and get funds in your bank account in 30 mins for a %2$s%% fee.' */
+										'Get %1$s via instant deposit. Funds are typically in your bank account within 30 mins. Fee: %2$s%%.',
+										'woocommerce-payments'
+									),
+									formatCurrency(
+										selectedOverview.instantBalance.amount,
+										selectedOverview.instantBalance.currency
+									),
+									selectedOverview.instantBalance
+										.fee_percentage
+								) }
+							</InlineNotice>
+						) }
+
+						<Flex justify="flex-start">
+							<InstantDepositButton
+								instantBalance={
+									selectedOverview.instantBalance
+								}
+							/>
+							{ isInstantDepositNoticeDismissed && ( // Show the tooltip only when the notice is dismissed.
+								<ClickTooltip
+									buttonIcon={ <HelpOutlineIcon /> }
+									buttonLabel={ __(
+										'Learn more about instant deposit',
+										'woocommerce-payments'
+									) }
+									content={
+										/* 'With instant deposit you can receive requested funds in your bank account within 30 mins for a 1.5% fee. Learn more' */
+
+										interpolateComponents( {
+											mixedString: sprintf(
+												__(
+													/* translators: %s: Instant deposit fee percentage */
+													'With {{strong}}instant deposit{{/strong}} you can receive requested funds in your bank account within 30 mins for a %s%% fee. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+													'woocommerce-payments'
+												),
+												selectedOverview.instantBalance
+													.fee_percentage
+											),
+											components: {
+												strong: <strong />,
+												learnMoreLink: (
+													<Link
+														href="https://woocommerce.com/document/woopayments/deposits/instant-deposits/"
+														target="_blank"
+														rel="noreferrer"
+														type="external"
+													/>
+												),
+											},
+										} )
+									}
+								/>
+							) }
+						</Flex>
 					</Flex>
 				) }
 		</>

client/components/account-balances/style.scss

@@ -12,6 +12,9 @@
 		font-size: 12px;
 		line-height: 16px;
 		color: $gray-600;
+		display: flex;
+		align-items: center;
+		margin-top: 0;
 	}
 
 	&__amount {
@@ -22,10 +25,8 @@
 	}
 }
 
-.wcpay-account-balances__balances__item__title {
-	display: flex;
-	align-items: center;
-	margin-top: 0;
+.wcpay-account-balances__instant-deposit-notice .components-notice__content {
+	margin-right: 0;
 }
 
 .wcpay-account-balances__instant-deposit {

client/components/account-balances/test/index.test.tsx

@@ -302,7 +302,7 @@ describe( 'AccountBalances', () => {
 		render( <AccountBalances /> );
 
 		screen.getByRole( 'button', {
-			name: 'Deposit available funds',
+			name: 'Get $300.00 now',
 		} );
 	} );
 

client/deposits/instant-deposits/index.tsx

@@ -5,13 +5,14 @@
  */
 import React from 'react';
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import { formatCurrency } from 'wcpay/utils/currency';
 import InstantDepositModal from './modal';
 import { useInstantDeposit } from 'wcpay/data';
 import type * as AccountOverview from 'wcpay/types/account-overview';
@@ -49,7 +50,17 @@ const InstantDepositButton: React.FC< InstantDepositButtonProps > = ( {
 				disabled={ buttonDisabled }
 				onClick={ () => setModalOpen( true ) }
 			>
-				{ __( 'Deposit available funds', 'woocommerce-payments' ) }
+				{ sprintf(
+					__(
+						/* translators: %s: Available instant deposit amount */
+						'Get %s now',
+						'woocommerce-payments'
+					),
+					formatCurrency(
+						instantBalance.amount,
+						instantBalance.currency
+					)
+				) }
 			</Button>
 			{ ( isModalOpen || inProgress ) && (
 				<InstantDepositModal

client/deposits/instant-deposits/test/__snapshots__/index.tsx.snap

@@ -6,19 +6,7 @@ exports[`Instant deposit button and modal button renders correctly with balance
     class="components-button is-primary"
     type="button"
   >
-    Deposit available funds
-  </button>
-</div>
-`;
-
-exports[`Instant deposit button and modal button renders correctly with zero balance 1`] = `
-<div>
-  <button
-    class="components-button is-primary"
-    disabled=""
-    type="button"
-  >
-    Deposit available funds
+    Get $123.45 now
   </button>
 </div>
 `;

client/deposits/instant-deposits/test/index.tsx

@@ -31,14 +31,6 @@ const mockInstantBalance = {
 	currency: 'USD',
 } as AccountOverview.InstantBalance;
 
-const mockZeroInstantBalance = {
-	amount: 0,
-	fee: 0,
-	net: 0,
-	fee_percentage: 1.5,
-	currency: 'USD',
-} as AccountOverview.InstantBalance;
-
 declare const global: {
 	wcpaySettings: {
 		zeroDecimalCurrencies: string[];
@@ -70,13 +62,6 @@ describe( 'Instant deposit button and modal', () => {
 		};
 	} );
 
-	test( 'button renders correctly with zero balance', () => {
-		const { container } = render(
-			<InstantDepositButton instantBalance={ mockZeroInstantBalance } />
-		);
-		expect( container ).toMatchSnapshot();
-	} );
-
 	test( 'button renders correctly with balance', () => {
 		const { container } = render(
 			<InstantDepositButton instantBalance={ mockInstantBalance } />
@@ -92,7 +77,9 @@ describe( 'Instant deposit button and modal', () => {
 			screen.queryByRole( 'dialog', { name: /instant deposit/i } )
 		).not.toBeInTheDocument();
 		fireEvent.click(
-			screen.getByRole( 'button', { name: /Deposit available funds/i } )
+			screen.getByRole( 'button', {
+				name: /Get \$123\.45 now/i,
+			} )
 		);
 		const modal = screen.queryByRole( 'dialog', {
 			name: /instant deposit/i,

client/globals.d.ts

@@ -118,6 +118,7 @@ declare global {
 		capabilityRequestNotices: Record< string, boolean >;
 		storeName: string;
 		isNextDepositNoticeDismissed: boolean;
+		isInstantDepositNoticeDismissed: boolean;
 		reporting: {
 			exportModalDismissed?: boolean;
 		};

client/utils/currency/index.js

@@ -340,7 +340,7 @@ function composeFallbackCurrency( amount, currencyCode, isZeroDecimal ) {
 	}
 }
 
-function trimEndingZeroes( formattedCurrencyAmount = '' ) {
+export function trimEndingZeroes( formattedCurrencyAmount = '' ) {
 	return formattedCurrencyAmount
 		.split( ' ' )
 		.map( ( chunk ) =>