Show total balance (pending + available) instead of pending balance (#…

…8140) Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Eric Jinks <[email protected]>
Automattic · Feb 29, 2024 · 6550753 · 6550753
1 parent fa9bbdf
commit 6550753
Show file tree

Hide file tree

Showing 10 changed files with 386 additions and 186 deletions.
diff --git a/changelog/update-8070-total-balance b/changelog/update-8070-total-balance
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+On Payments Overview page, show total balance (pending + available) instead of pending balance.
diff --git a/client/components/account-balances/balance-block.tsx b/client/components/account-balances/balance-block.tsx
@@ -8,25 +8,24 @@ import * as React from 'react';
  */
 import { formatCurrency } from 'wcpay/utils/currency';
 import Loadable from 'components/loadable';
-import BalanceTooltip from './balance-tooltip';
 
 /**
  * BalanceBlockProps
  *
  * @typedef {Object} BalanceBlockProps
  *
- * @property {string} id											The balance block id. Used to link the title and amount.
- * @property {string} title											The balance title.
- * @property {string} currencyCode									Currency code of the balance block.
- * @property {React.ReactElement< typeof BalanceTooltip >} tooltip	The tooltip element.
- * @property {number} [amount]										Optional. The balance amount.
- * @property {boolean} [isLoading]									Optional. Whether the balance block is loading.
+ * @property {string} id					The balance block id. Used to link the title and amount.
+ * @property {string} title					The balance title.
+ * @property {string} currencyCode			Currency code of the balance block.
+ * @property {React.ReactElement} tooltip	The tooltip element.
+ * @property {number} [amount]				Optional. The balance amount.
+ * @property {boolean} [isLoading]			Optional. Whether the balance block is loading.
  */
 interface BalanceBlockProps {
 	id: string;
 	title: string;
 	currencyCode: string;
-	tooltip?: React.ReactElement< typeof BalanceTooltip >;
+	tooltip?: React.ReactElement;
 	amount?: number;
 	isLoading?: boolean;
 }

diff --git a/client/components/account-balances/balance-tooltip.tsx b/client/components/account-balances/balance-tooltip.tsx
@@ -3,29 +3,149 @@
  */
 import React from 'react';
 import HelpOutlineIcon from 'gridicons/dist/help-outline';
+import interpolateComponents from '@automattic/interpolate-components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { ClickTooltip } from 'components/tooltip';
+import { documentationUrls, fundLabelStrings } from './strings';
+import InlineNotice from 'components/inline-notice';
 
-type BalanceTooltipProps = {
-	label: string;
-	content: React.ReactNode;
+type TotalBalanceTooltipProps = {
+	balance: number;
 };
 
-const BalanceTooltip: React.FC< BalanceTooltipProps > = ( {
-	label,
-	content,
+type AvailableBalanceTooltipProps = {
+	balance: number;
+};
+
+export const TotalBalanceTooltip: React.FC< TotalBalanceTooltipProps > = ( {
+	balance,
 } ) => {
+	const isBalanceNegative = balance < 0;
 	return (
 		<ClickTooltip
-			content={ content }
 			className="wcpay-account-balances__balances__item__tooltip"
 			buttonIcon={ <HelpOutlineIcon /> }
-			buttonLabel={ label }
+			buttonLabel={ `${ fundLabelStrings.total } tooltip` }
+			maxWidth={ '315px' } // So that tooltip is wide enough and the content in the inline notice is not wrapped.
+			content={
+				<>
+					<>
+						{ interpolateComponents( {
+							mixedString: __(
+								'{{bold}}Total balance{{/bold}} combines both pending funds (transactions under processing) and available funds (ready for deposit). {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+								'woocommerce-payments'
+							),
+							components: {
+								bold: <b />,
+								learnMoreLink: (
+									// eslint-disable-next-line jsx-a11y/anchor-has-content
+									<a
+										rel="external noopener noreferrer"
+										target="_blank"
+										href={
+											documentationUrls.depositSchedule
+										}
+									/>
+								),
+							},
+						} ) }
+					</>
+					<InlineNotice
+						className="wcpay-account-balances__balances-total-balance-tooltip-notice"
+						isDismissible={ false }
+					>
+						{ __(
+							'Total balance = Available funds + Pending funds',
+							'woocommerce-payments'
+						) }
+					</InlineNotice>
+					<>
+						{ isBalanceNegative &&
+							interpolateComponents( {
+								mixedString: __(
+									'Negative account balance? {{discoverWhyLink}}Discover why.{{/discoverWhyLink}}',
+									'woocommerce-payments'
+								),
+								components: {
+									discoverWhyLink: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											rel="external noopener noreferrer"
+											target="_blank"
+											href={
+												documentationUrls.negativeBalance
+											}
+										/>
+									),
+								},
+							} ) }
+					</>
+				</>
+			}
 		/>
 	);
 };
 
-export default BalanceTooltip;
+export const AvailableBalanceTooltip: React.FC< AvailableBalanceTooltipProps > = ( {
+	balance,
+} ) => {
+	const isBalanceNegative = balance < 0;
+	return (
+		<ClickTooltip
+			className="wcpay-account-balances__balances__item__tooltip"
+			buttonIcon={ <HelpOutlineIcon /> }
+			buttonLabel={ `${ fundLabelStrings.available } tooltip` }
+			maxWidth={ isBalanceNegative ? '280px' : undefined } // So that the negative balance sentence is not wrapped and looks like the design.
+			content={
+				<>
+					<p>
+						{ interpolateComponents( {
+							mixedString: __(
+								'{{bold}}Available funds{{/bold}} have completed processing and are ready to be deposited into your bank account. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+								'woocommerce-payments'
+							),
+							components: {
+								bold: <b />,
+								learnMoreLink: (
+									// eslint-disable-next-line jsx-a11y/anchor-has-content
+									<a
+										rel="external noopener noreferrer"
+										target="_blank"
+										href={
+											documentationUrls.depositSchedule
+										}
+									/>
+								),
+							},
+						} ) }
+					</p>
+					<p>
+						{ isBalanceNegative &&
+							interpolateComponents( {
+								mixedString: __(
+									'Negative account balance? {{discoverWhyLink}}Discover why.{{/discoverWhyLink}}',
+									'woocommerce-payments'
+								),
+								components: {
+									discoverWhyLink: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											rel="external noopener noreferrer"
+											target="_blank"
+											href={
+												documentationUrls.negativeBalance
+											}
+										/>
+									),
+								},
+							} ) }
+					</p>
+				</>
+			}
+		/>
+	);
+};