Add deposit schedule help tooltip to deposits list screen so it's con…

…sistent with Payments Overview (#8263) Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Shendy <[email protected]>
Automattic · Feb 28, 2024 · eae3c17 · eae3c17
1 parent 835df7f
commit eae3c17
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 85 deletions.
diff --git a/changelog/fix-8026-deposit-schedule-notice-add-tooltip b/changelog/fix-8026-deposit-schedule-notice-add-tooltip
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Add deposit schedule help tooltip to deposits list screen so it's consistent with Payments Overview.
diff --git a/client/components/deposits-overview/deposit-schedule.tsx b/client/components/deposits-overview/deposit-schedule.tsx
@@ -5,22 +5,28 @@ import React from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
 import moment from 'moment';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
 
 /**
  * Internal dependencies
  */
-import { getDepositMonthlyAnchorLabel } from 'wcpay/deposits/utils';
+import { ClickTooltip } from 'components/tooltip';
+import {
+	hasAutomaticScheduledDeposits,
+	getDepositMonthlyAnchorLabel,
+} from 'wcpay/deposits/utils';
 import type * as AccountOverview from 'wcpay/types/account-overview';
 
 interface DepositScheduleProps {
 	depositsSchedule: AccountOverview.Account[ 'deposits_schedule' ];
 }
+
 /**
- * Renders the Deposit Schedule details component.
+ * Renders a rich-text sentence summarising the deposit schedule.
  *
  * eg "Your deposits are dispatched automatically every day"
  */
-const DepositSchedule: React.FC< DepositScheduleProps > = ( {
+const DepositScheduleSummary: React.FC< DepositScheduleProps > = ( {
 	depositsSchedule,
 } ) => {
 	switch ( depositsSchedule.interval ) {
@@ -97,4 +103,100 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 	}
 };
 
+/**
+ * Renders a summary of the deposit schedule & a tooltip so merchant understands when they will get paid.
+ *
+ * If the merchant has no schedule configured, renders nothing.
+ */
+const DepositSchedule: React.FC< DepositScheduleProps > = ( {
+	depositsSchedule,
+} ) => {
+	// Bail if the merchant is on manual or ad-hoc deposits.
+	if ( ! hasAutomaticScheduledDeposits( depositsSchedule.interval ) ) {
+		return null;
+	}
+
+	const nextDepositHelpContent = (
+		<>
+			{ __(
+				'Deposits are initiated based on the following criteria:',
+				'woocommerce-payments'
+			) }
+			<ul>
+				<li>
+					{ interpolateComponents( {
+						mixedString: __(
+							'The {{link}}pending period{{/link}} in your country',
+							'woocommerce-payments'
+						),
+						components: {
+							link: (
+								// eslint-disable-next-line jsx-a11y/anchor-has-content
+								<a
+									rel="external noopener noreferrer"
+									target="_blank"
+									href={
+										'https://woo.com/document/woopayments/deposits/deposit-schedule/#pending-period-chart'
+									}
+								/>
+							),
+						},
+					} ) }
+				</li>
+				<li>
+					{ interpolateComponents( {
+						mixedString: __(
+							"Your account's {{link}}available funds{{/link}}",
+							'woocommerce-payments'
+						),
+						components: {
+							link: (
+								// eslint-disable-next-line jsx-a11y/anchor-has-content
+								<a
+									rel="external noopener noreferrer"
+									target="_blank"
+									href={
+										'https://woo.com/document/woopayments/deposits/deposit-schedule/#available-funds'
+									}
+								/>
+							),
+						},
+					} ) }
+				</li>
+				<li>
+					{ interpolateComponents( {
+						mixedString: __(
+							'Your {{link}}deposit schedule{{/link}} settings',
+							'woocommerce-payments'
+						),
+						components: {
+							link: (
+								// eslint-disable-next-line jsx-a11y/anchor-has-content
+								<a
+									rel="external noopener noreferrer"
+									target="_blank"
+									href={
+										'https://woo.com/document/woopayments/deposits/change-deposit-schedule/'
+									}
+								/>
+							),
+						},
+					} ) }
+				</li>
+			</ul>
+		</>
+	);
+
+	return (
+		<>
+			<DepositScheduleSummary depositsSchedule={ depositsSchedule } />
+			<ClickTooltip
+				content={ nextDepositHelpContent }
+				buttonIcon={ <HelpOutlineIcon /> }
+				buttonLabel={ 'Deposit schedule tooltip' }
+			/>
+		</>
+	);
+};
+
 export default DepositSchedule;
diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx
@@ -10,8 +10,6 @@ import {
 	CardHeader,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import HelpOutlineIcon from 'gridicons/dist/help-outline';
-import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies.
@@ -20,7 +18,6 @@ import { getAdminUrl } from 'wcpay/utils';
 import { formatExplicitCurrency } from 'wcpay/utils/currency';
 import { recordEvent } from 'tracks';
 import Loadable from 'components/loadable';
-import { ClickTooltip } from 'components/tooltip';
 import { useSelectedCurrencyOverview } from 'wcpay/overview/hooks';
 import RecentDepositsList from './recent-deposits-list';
 import DepositSchedule from './deposit-schedule';
@@ -32,6 +29,7 @@ import {
 	NoFundsAvailableForDepositNotice,
 	SuspendedDepositNotice,
 } from './deposit-notices';
+import { hasAutomaticScheduledDeposits } from 'wcpay/deposits/utils';
 import useRecentDeposits from './hooks';
 import './style.scss';
 
@@ -71,6 +69,9 @@ const DepositsOverview: React.FC = () => {
 		! account?.deposits_blocked && hasCompletedWaitingPeriod;
 	// Only show the deposit history section if the page is finished loading and there are deposits. */ }
 	const hasRecentDeposits = ! isLoading && deposits?.length > 0 && !! account;
+	const hasScheduledDeposits = hasAutomaticScheduledDeposits(
+		account?.deposits_schedule?.interval
+	);
 
 	// Show a loading state if the page is still loading.
 	if ( isLoading ) {
@@ -109,94 +110,18 @@ const DepositsOverview: React.FC = () => {
 		return null;
 	}
 
-	const nextDepositHelpContent = (
-		<>
-			{ __(
-				'Deposits are initiated based on the following criteria:',
-				'woocommerce-payments'
-			) }
-			<ul>
-				<li>
-					{ interpolateComponents( {
-						mixedString: __(
-							'The {{link}}pending period{{/link}} in your country',
-							'woocommerce-payments'
-						),
-						components: {
-							link: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a
-									rel="external noopener noreferrer"
-									target="_blank"
-									href={
-										'https://woo.com/document/woopayments/deposits/deposit-schedule/#pending-period-chart'
-									}
-								/>
-							),
-						},
-					} ) }
-				</li>
-				<li>
-					{ interpolateComponents( {
-						mixedString: __(
-							"Your account's {{link}}available funds{{/link}}",
-							'woocommerce-payments'
-						),
-						components: {
-							link: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a
-									rel="external noopener noreferrer"
-									target="_blank"
-									href={
-										'https://woo.com/document/woopayments/deposits/deposit-schedule/#available-funds'
-									}
-								/>
-							),
-						},
-					} ) }
-				</li>
-				<li>
-					{ interpolateComponents( {
-						mixedString: __(
-							'Your {{link}}deposit schedule{{/link}} settings',
-							'woocommerce-payments'
-						),
-						components: {
-							link: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a
-									rel="external noopener noreferrer"
-									target="_blank"
-									href={
-										'https://woo.com/document/woopayments/deposits/change-deposit-schedule/'
-									}
-								/>
-							),
-						},
-					} ) }
-				</li>
-			</ul>
-		</>
-	);
-
 	return (
 		<Card className="wcpay-deposits-overview">
 			<CardHeader>
 				{ __( 'Deposits', 'woocommerce-payments' ) }
 			</CardHeader>
 
 			{ /* Deposit schedule message */ }
-			{ isDepositsUnrestricted && !! account && (
+			{ isDepositsUnrestricted && !! account && hasScheduledDeposits && (
 				<CardBody className="wcpay-deposits-overview__schedule__container">
 					<DepositSchedule
 						depositsSchedule={ account.deposits_schedule }
 					/>
-					<ClickTooltip
-						content={ nextDepositHelpContent }
-						buttonIcon={ <HelpOutlineIcon /> }
-						buttonLabel={ 'Deposit schedule tooltip' }
-					/>
 				</CardBody>
 			) }
 

diff --git a/client/components/deposits-overview/test/index.tsx b/client/components/deposits-overview/test/index.tsx
@@ -501,7 +501,7 @@ describe( 'Deposit Schedule renders', () => {
 
 		expect( descriptionText ).toContain( 'every day' );
 	} );
-	test( 'with a daily schedule', () => {
+	test( 'with a manual schedule', () => {
 		mockAccount.deposits_schedule.interval = 'manual';
 
 		const { container } = render(

diff --git a/client/deposits/index.tsx b/client/deposits/index.tsx
@@ -16,6 +16,7 @@ import DepositSchedule from 'components/deposits-overview/deposit-schedule';
 import { useAllDepositsOverviews } from 'data';
 import { useSettings } from 'wcpay/data';
 import DepositsList from './list';
+import { hasAutomaticScheduledDeposits } from 'wcpay/deposits/utils';
 
 const useNextDepositNoticeState = () => {
 	const { updateOptions } = useDispatch( 'wc/admin/options' );
@@ -53,11 +54,16 @@ const NextDepositNotice: React.FC = () => {
 	const hasCompletedWaitingPeriod =
 		wcpaySettings.accountStatus.deposits?.completed_waiting_period;
 
+	const hasScheduledDeposits = hasAutomaticScheduledDeposits(
+		account?.deposits_schedule.interval
+	);
+
 	if (
 		! isDepositsUnrestricted ||
 		! hasCompletedWaitingPeriod ||
 		! account ||
-		isNextDepositNoticeDismissed
+		isNextDepositNoticeDismissed ||
+		! hasScheduledDeposits
 	) {
 		return null;
 	}

diff --git a/client/deposits/list/style.scss b/client/deposits/list/style.scss
@@ -6,3 +6,12 @@ $space-header-item: 12px;
 		margin-right: $space-header-item;
 	}
 }
+
+// Tweak dismiss button height so text is vertically centered.
+// This is a short-term hack, this notice will be moving inside table and
+// use an InlineNotice in future.
+// https://github.com/Automattic/woocommerce-payments/issues/8260
+// Can delete this rule when that issue is fixed.
+button.components-button.wcpay-banner-notice__dismiss.has-icon {
+	height: 20px;
+}
diff --git a/client/deposits/utils/index.ts b/client/deposits/utils/index.ts
@@ -47,3 +47,16 @@ export const getDepositMonthlyAnchorLabel = ( {
 	}
 	return label;
 };
+
+// Determine if the store/merchant has scheduled deposits configured.
+export const hasAutomaticScheduledDeposits = (
+	depositsScheduleInterval: string | undefined
+): boolean => {
+	if ( ! depositsScheduleInterval ) {
+		return false;
+	}
+
+	return [ 'daily', 'weekly', 'monthly' ].includes(
+		depositsScheduleInterval
+	);
+};