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

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.

client/components/account-balances/balance-block.tsx

@@ -8,25 +8,30 @@ import * as React from 'react';
  */
 import { formatCurrency } from 'wcpay/utils/currency';
 import Loadable from 'components/loadable';
-import BalanceTooltip from './balance-tooltip';
+import {
+	TotalBalanceTooltip,
+	AvailableBalanceTooltip,
+} 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< typeof TotalBalanceTooltip | typeof AvailableBalanceTooltip >} 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<
+		typeof TotalBalanceTooltip | typeof AvailableBalanceTooltip
+	>;
 	amount?: number;
 	isLoading?: boolean;
 }

client/components/account-balances/balance-tooltip.tsx

@@ -3,29 +3,165 @@
  */
 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;
+	maxWidth?: string | undefined;
+};
+
+type TotalBalanceTooltipProps = {
+	balance: number;
+};
+
+type AvailableBalanceTooltipProps = {
+	balance: number;
 };
 
 const BalanceTooltip: React.FC< BalanceTooltipProps > = ( {
 	label,
 	content,
+	maxWidth,
 } ) => {
 	return (
 		<ClickTooltip
 			content={ content }
 			className="wcpay-account-balances__balances__item__tooltip"
 			buttonIcon={ <HelpOutlineIcon /> }
 			buttonLabel={ label }
+			maxWidth={ maxWidth }
 		/>
 	);
 };
 
-export default BalanceTooltip;
+export const TotalBalanceTooltip: React.FC< TotalBalanceTooltipProps > = ( {
+	balance,
+} ) => {
+	return (
+		<BalanceTooltip
+			label={ `${ fundLabelStrings.total } tooltip` }
+			maxWidth={ '315px' }
+			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>
+					<>
+						{ balance < 0 &&
+							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 const AvailableBalanceTooltip: React.FC< AvailableBalanceTooltipProps > = ( {
+	balance,
+} ) => {
+	return (
+		<BalanceTooltip
+			label={ `${ fundLabelStrings.available } tooltip` }
+			maxWidth={ balance < 0 ? '280px' : undefined }
+			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>
+						{ balance < 0 &&
+							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>
+				</>
+			}
+		/>
+	);
+};