Merge release/6.9.2 into trunk

changelog.txt

@@ -1,5 +1,11 @@
 *** WooPayments Changelog ***
 
+= 6.9.2 - 2023-12-14 =
+* Add - Notice is added when merchant has funds that are not yet available for deposit.
+* Add - Show a deposit schedule notice on the deposits list page to indicate that future deposits can be expected.
+* Fix - Show deposit schedule message when deposits are unrestricted
+* Fix - Transactions List - indicate when a transaction is expected to be included in a future deposit
+
 = 6.9.1 - 2023-12-07 =
 * Fix - Display Klarna & Afterpay on the checkout for UK based stores
 

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

@@ -150,3 +150,28 @@ export const NegativeBalanceDepositsPausedNotice: React.FC = () => (
 		} ) }
 	</InlineNotice>
 );
+
+/**
+ * Renders a notice informing the user that deposits only occur when there are funds available.
+ */
+export const NoFundsAvailableForDepositNotice: React.FC = () => (
+	<InlineNotice status="warning" icon isDismissible={ false }>
+		{ interpolateComponents( {
+			mixedString: __(
+				'You have no funds available to deposit. {{whyLink}}Why?{{/whyLink}}',
+				'woocommerce-payments'
+			),
+			components: {
+				whyLink: (
+					// Link content is in the format string above. Consider disabling jsx-a11y/anchor-has-content.
+					// eslint-disable-next-line jsx-a11y/anchor-has-content
+					<a
+						target="_blank"
+						rel="noopener noreferrer"
+						href="https://woo.com/document/woopayments/deposits/deposit-schedule/#pending-funds"
+					/>
+				),
+			},
+		} ) }
+	</InlineNotice>
+);

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

@@ -17,6 +17,7 @@ import type * as AccountOverview from 'wcpay/types/account-overview';
 
 interface DepositScheduleProps {
 	depositsSchedule: AccountOverview.Account[ 'deposits_schedule' ];
+	showNextDepositDate?: boolean;
 }
 /**
  * Renders the Deposit Schedule details component.
@@ -25,19 +26,30 @@ interface DepositScheduleProps {
  */
 const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 	depositsSchedule,
+	showNextDepositDate,
 } ) => {
 	const nextDepositDate = getNextDepositDate( depositsSchedule );
+	const nextDepositDateString = showNextDepositDate
+		? sprintf(
+				/** translators: %s: is the date of the next deposit, e.g. "January 1st, 2023". */
+				__(
+					' – your next deposit is scheduled for {{strong}}%s{{/strong}}',
+					'woocommerce-payments'
+				),
+				nextDepositDate
+		  )
+		: '';
 
 	switch ( depositsSchedule.interval ) {
 		case 'daily':
 			return interpolateComponents( {
 				mixedString: sprintf(
-					/** translators: {{strong}}: placeholders are opening and closing strong tags. %s: is the date of the next deposit, e.g. "January 1st, 2023". */
+					/** translators: {{strong}}: placeholders are opening and closing strong tags. %s: is an optional next deposit date message. */
 					__(
-						'Available funds are automatically dispatched {{strong}}every day{{/strong}} – your next deposit is scheduled for {{strong}}%s{{/strong}}.',
+						'Available funds are automatically dispatched {{strong}}every day{{/strong}}%s.',
 						'woocommerce-payments'
 					),
-					nextDepositDate
+					nextDepositDateString
 				),
 				components: {
 					strong: <strong />,
@@ -52,13 +64,13 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 
 			return interpolateComponents( {
 				mixedString: sprintf(
-					/** translators: %1$s: is the day of the week. eg "Friday". %2$s: is the date of the next deposit, e.g. "January 1st, 2023". {{strong}}: placeholders are opening and closing strong tags. */
+					/** translators: %1$s: is the day of the week. eg "Friday". %2$s: is an optional next deposit date message. {{strong}}: placeholders are opening and closing strong tags. */
 					__(
-						'Available funds are automatically dispatched {{strong}}every %1$s{{/strong}} – your next deposit is scheduled for {{strong}}%2$s{{/strong}}.',
+						'Available funds are automatically dispatched {{strong}}every %1$s{{/strong}}%2$s.',
 						'woocommerce-payments'
 					),
 					dayOfWeek,
-					nextDepositDate
+					nextDepositDateString
 				),
 				components: {
 					strong: <strong />,
@@ -71,12 +83,12 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 			if ( monthlyAnchor === 31 ) {
 				return interpolateComponents( {
 					mixedString: sprintf(
-						/** translators: {{strong}}: placeholders are opening and closing strong tags. %s: is the date of the next deposit, e.g. "January 1st, 2023". */
+						/** translators: {{strong}}: placeholders are opening and closing strong tags. %s: is an optional next deposit date message. */
 						__(
-							'Available funds are automatically dispatched {{strong}}on the last day of every month{{/strong}} – your next deposit is scheduled for {{strong}}%s{{/strong}}.',
+							'Available funds are automatically dispatched {{strong}}on the last day of every month{{/strong}}%s.',
 							'woocommerce-payments'
 						),
-						nextDepositDate
+						nextDepositDateString
 					),
 					components: {
 						strong: <strong />,
@@ -86,16 +98,16 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 
 			return interpolateComponents( {
 				mixedString: sprintf(
-					/** translators: {{strong}}: placeholders are opening and closing strong tags. %1$s: is the day of the month. eg "31st". %2$s: is the date of the next deposit, e.g. "January 1st, 2023". */
+					/** translators: {{strong}}: placeholders are opening and closing strong tags. %1$s: is the day of the month. eg "31st". %2$s: is an optional next deposit date message. */
 					__(
-						'Available funds are automatically dispatched {{strong}}on the %1$s of every month{{/strong}} – your next deposit is scheduled for {{strong}}%2$s{{/strong}}.',
+						'Available funds are automatically dispatched {{strong}}on the %1$s of every month{{/strong}}%2$s.',
 						'woocommerce-payments'
 					),
 					getDepositMonthlyAnchorLabel( {
 						monthlyAnchor: monthlyAnchor,
 						capitalize: false,
 					} ),
-					nextDepositDate
+					nextDepositDateString
 				),
 				components: {
 					strong: <strong />,

client/components/deposits-overview/index.tsx

@@ -24,6 +24,7 @@ import {
 	DepositTransitDaysNotice,
 	NegativeBalanceDepositsPausedNotice,
 	NewAccountWaitingPeriodNotice,
+	NoFundsAvailableForDepositNotice,
 	SuspendedDepositNotice,
 } from './deposit-notices';
 import useRecentDeposits from './hooks';
@@ -35,6 +36,9 @@ const DepositsOverview: React.FC = () => {
 		overview,
 		isLoading: isLoadingOverview,
 	} = useSelectedCurrencyOverview();
+	const isDepositsUnrestricted =
+		wcpaySettings.accountStatus.deposits?.restrictions ===
+		'deposits_unrestricted';
 	const selectedCurrency =
 		overview?.currency || wcpaySettings.accountDefaultCurrency;
 	const { isLoading: isLoadingDeposits, deposits } = useRecentDeposits(
@@ -44,20 +48,18 @@ const DepositsOverview: React.FC = () => {
 	const isLoading = isLoadingOverview || isLoadingDeposits;
 
 	const availableFunds = overview?.available?.amount ?? 0;
+	const pendingFunds = overview?.pending?.amount ?? 0;
 
-	// If the account has deposits blocked, there is no available balance or it is negative, there is no future deposit expected.
-	const isNextDepositExpected =
-		! account?.deposits_blocked && availableFunds > 0;
 	// If the available balance is negative, deposits may be paused.
 	const isNegativeBalanceDepositsPaused = availableFunds < 0;
+	// When there are funds pending but no available funds, deposits are paused.
+	const isDepositAwaitingPendingFunds =
+		availableFunds === 0 && pendingFunds > 0;
 	const hasCompletedWaitingPeriod =
 		wcpaySettings.accountStatus.deposits?.completed_waiting_period;
 	// Only show the deposit history section if the page is finished loading and there are deposits. */ }
 	const showRecentDeposits =
-		! isLoading &&
-		deposits?.length > 0 &&
-		!! account &&
-		! account?.deposits_blocked;
+		! isLoading && deposits?.length > 0 && !! account;
 
 	// Show a loading state if the page is still loading.
 	if ( isLoading ) {
@@ -87,7 +89,7 @@ const DepositsOverview: React.FC = () => {
 	}
 
 	// This card isn't shown if there are no deposits, so we can bail early.
-	if ( ! isLoading && availableFunds === 0 && deposits.length === 0 ) {
+	if ( ! isLoading && deposits.length === 0 ) {
 		return null;
 	}
 
@@ -98,10 +100,11 @@ const DepositsOverview: React.FC = () => {
 			</CardHeader>
 
 			{ /* Deposit schedule message */ }
-			{ isNextDepositExpected && !! account && (
+			{ isDepositsUnrestricted && !! account && (
 				<CardBody className="wcpay-deposits-overview__schedule__container">
 					<DepositSchedule
 						depositsSchedule={ account.deposits_schedule }
+						showNextDepositDate={ availableFunds > 0 }
 					/>
 				</CardBody>
 			) }
@@ -112,12 +115,17 @@ const DepositsOverview: React.FC = () => {
 					<SuspendedDepositNotice />
 				) : (
 					<>
-						{ isNextDepositExpected && (
-							<DepositTransitDaysNotice />
-						) }
+						{ isDepositsUnrestricted &&
+							! isDepositAwaitingPendingFunds && (
+								<DepositTransitDaysNotice />
+							) }
 						{ ! hasCompletedWaitingPeriod && (
 							<NewAccountWaitingPeriodNotice />
 						) }
+						{ hasCompletedWaitingPeriod &&
+							isDepositAwaitingPendingFunds && (
+								<NoFundsAvailableForDepositNotice />
+							) }
 						{ isNegativeBalanceDepositsPaused && (
 							<NegativeBalanceDepositsPausedNotice />
 						) }

client/components/deposits-overview/test/__snapshots__/index.tsx.snap

@@ -17,11 +17,65 @@ exports[`Deposits Overview information Component Renders 1`] = `
       >
         Deposits
       </div>
+      <div
+        class="components-card__body components-card-body wcpay-deposits-overview__schedule__container css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="CardBody"
+      >
+        Available funds are automatically dispatched 
+        <strong>
+          every Monday
+        </strong>
+        .
+      </div>
       <div
         class="components-card__body components-card-body wcpay-deposits-overview__notices__container css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardBody"
-      />
+      >
+        <div
+          class="wcpay-inline-notice wcpay-inline-undefined-notice wcpay-deposit-transit-days-notice components-notice is-info"
+        >
+          <div
+            class="components-notice__content"
+          >
+            <div
+              class="components-flex css-bmzg3m-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+              data-wp-c16t="true"
+              data-wp-component="Flex"
+            >
+              <div
+                class="components-flex-item wcpay-inline-notice__icon wcpay-inline-undefined-notice__icon css-mw3lhz-View-Item-sx-Base em57xhy0"
+                data-wp-c16t="true"
+                data-wp-component="FlexItem"
+              >
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z"
+                  />
+                </svg>
+              </div>
+              <div
+                class="components-flex-item wcpay-inline-notice__content wcpay-inline-undefined-notice__content css-mw3lhz-View-Item-sx-Base em57xhy0"
+                data-wp-c16t="true"
+                data-wp-component="FlexItem"
+              >
+                It may take 1-3 business days for deposits to reach your bank account.
+              </div>
+            </div>
+            <div
+              class="components-notice__actions"
+            />
+          </div>
+        </div>
+      </div>
       <div
         class="components-card__body components-card-body wcpay-deposits-overview__heading css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
         data-wp-c16t="true"

client/components/deposits-overview/test/index.tsx

@@ -51,6 +51,7 @@ declare const global: {
 	wcpaySettings: {
 		accountStatus: {
 			deposits: {
+				restrictions: string;
 				completed_waiting_period: boolean;
 			};
 		};
@@ -210,6 +211,7 @@ describe( 'Deposits Overview information', () => {
 		global.wcpaySettings = {
 			accountStatus: {
 				deposits: {
+					restrictions: 'deposits_unrestricted',
 					completed_waiting_period: true,
 				},
 			},

client/components/tooltip/style.scss

@@ -37,6 +37,9 @@
 		z-index: 100010;
 		// Initial left position is set to 0 to fix a positioning bug in mobile Safari.
 		left: 0;
+		white-space: normal;
+		font-size: 12px;
+		font-weight: 400;
 
 		&.is-hiding {
 			opacity: 0 !important;

client/deposits/index.tsx

@@ -3,19 +3,80 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies.
  */
 import Page from 'components/page';
 import { TestModeNotice } from 'components/test-mode-notice';
+import BannerNotice from 'components/banner-notice';
+import DepositSchedule from 'components/deposits-overview/deposit-schedule';
+import { useAllDepositsOverviews } from 'data';
 import DepositsList from './list';
 
+const useNextDepositNoticeState = () => {
+	const { updateOptions } = useDispatch( 'wc/admin/options' );
+	const [ isDismissed, setIsDismissed ] = useState(
+		wcpaySettings.isNextDepositNoticeDismissed
+	);
+
+	const setNextDepositNoticeDismissed = () => {
+		setIsDismissed( true );
+		wcpaySettings.isNextDepositNoticeDismissed = true;
+		updateOptions( {
+			wcpay_next_deposit_notice_dismissed: true,
+		} );
+	};
+
+	return {
+		isNextDepositNoticeDismissed: isDismissed,
+		handleDismissNextDepositNotice: setNextDepositNoticeDismissed,
+	};
+};
+
+const NextDepositNotice: React.FC = () => {
+	const {
+		overviews: { account },
+	} = useAllDepositsOverviews();
+	const {
+		isNextDepositNoticeDismissed,
+		handleDismissNextDepositNotice,
+	} = useNextDepositNoticeState();
+
+	const isDepositsUnrestricted =
+		wcpaySettings.accountStatus.deposits?.restrictions ===
+		'deposits_unrestricted';
+
+	const hasCompletedWaitingPeriod =
+		wcpaySettings.accountStatus.deposits?.completed_waiting_period;
+
+	if (
+		! isDepositsUnrestricted ||
+		! hasCompletedWaitingPeriod ||
+		! account ||
+		isNextDepositNoticeDismissed
+	) {
+		return null;
+	}
+
+	return (
+		<BannerNotice
+			status="info"
+			isDismissible
+			onRemove={ handleDismissNextDepositNotice }
+		>
+			<DepositSchedule depositsSchedule={ account.deposits_schedule } />
+		</BannerNotice>
+	);
+};
+
 const DepositsPage: React.FC = () => {
 	return (
 		<Page>
 			<TestModeNotice currentPage="deposits" />
+			<NextDepositNotice />
 			<DepositsList />
 		</Page>
 	);