ensure deposit schedule summary & tooltip (and surrounding markup) is…

… only rendered when there is a valid schedule

client/components/deposits-overview/deposit-schedule.tsx

@@ -11,7 +11,10 @@ import HelpOutlineIcon from 'gridicons/dist/help-outline';
  * Internal dependencies
  */
 import { ClickTooltip } from 'components/tooltip';
-import { getDepositMonthlyAnchorLabel } from 'wcpay/deposits/utils';
+import {
+	hasAutomaticScheduledDeposits,
+	getDepositMonthlyAnchorLabel,
+} from 'wcpay/deposits/utils';
 import type * as AccountOverview from 'wcpay/types/account-overview';
 
 interface DepositScheduleProps {
@@ -101,13 +104,18 @@ const DepositScheduleSummary: React.FC< DepositScheduleProps > = ( {
 };
 
 /**
- * Renders a summary of the deposit schedule so merchant understands when they will get paid.
+ * Renders a summary of the deposit schedule & a tooltip so merchant understands when they will get paid.
  *
- * eg "Your deposits are dispatched automatically every day"
+ * 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 = (
 		<>
 			{ __(
@@ -182,15 +190,11 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 	return (
 		<>
 			<DepositScheduleSummary depositsSchedule={ depositsSchedule } />
-			{ [ 'daily', 'weekly', 'monthly' ].includes(
-				depositsSchedule.interval
-			) && (
-				<ClickTooltip
-					content={ nextDepositHelpContent }
-					buttonIcon={ <HelpOutlineIcon /> }
-					buttonLabel={ 'Deposit schedule tooltip' }
-				/>
-			) }
+			<ClickTooltip
+				content={ nextDepositHelpContent }
+				buttonIcon={ <HelpOutlineIcon /> }
+				buttonLabel={ 'Deposit schedule tooltip' }
+			/>
 		</>
 	);
 };

client/components/deposits-overview/index.tsx

@@ -29,6 +29,7 @@ import {
 	NoFundsAvailableForDepositNotice,
 	SuspendedDepositNotice,
 } from './deposit-notices';
+import { hasAutomaticScheduledDeposits } from 'wcpay/deposits/utils';
 import useRecentDeposits from './hooks';
 import './style.scss';
 
@@ -68,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 ) {
@@ -113,7 +117,7 @@ const DepositsOverview: React.FC = () => {
 			</CardHeader>
 
 			{ /* Deposit schedule message */ }
-			{ isDepositsUnrestricted && !! account && (
+			{ isDepositsUnrestricted && !! account && hasScheduledDeposits && (
 				<CardBody className="wcpay-deposits-overview__schedule__container">
 					<DepositSchedule
 						depositsSchedule={ account.deposits_schedule }

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,14 +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 ||
-		! [ 'daily', 'weekly', 'monthly' ].includes(
-			account.deposits_schedule.interval
-		)
+		! hasScheduledDeposits
 	) {
 		return null;
 	}

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
+	);
+};