diff --git a/changelog/fix-8026-deposit-schedule-notice-add-tooltip b/changelog/fix-8026-deposit-schedule-notice-add-tooltip new file mode 100644 index 00000000000..3bbef408b43 --- /dev/null +++ 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 index 47e817b025c..eed43a4ae81 100644 --- 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' + ) } + + + ); + + return ( + <> + + } + buttonLabel={ 'Deposit schedule tooltip' } + /> + + ); +}; + export default DepositSchedule; diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx index 6e13fa5c8ab..e5ab2291197 100644 --- 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,77 +110,6 @@ const DepositsOverview: React.FC = () => { return null; } - const nextDepositHelpContent = ( - <> - { __( - 'Deposits are initiated based on the following criteria:', - 'woocommerce-payments' - ) } - - - ); - return ( @@ -187,16 +117,11 @@ const DepositsOverview: React.FC = () => { { /* Deposit schedule message */ } - { isDepositsUnrestricted && !! account && ( + { isDepositsUnrestricted && !! account && hasScheduledDeposits && ( - } - buttonLabel={ 'Deposit schedule tooltip' } - /> ) } diff --git a/client/components/deposits-overview/test/index.tsx b/client/components/deposits-overview/test/index.tsx index 27fd9d7e412..ed56e5e25ba 100644 --- 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 index 34a74dade6b..f08dff494e6 100644 --- 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 index 0343e372cfc..5b7ecafb8e9 100644 --- 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 index a53c64e9999..3d8fd6276e1 100644 --- 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 + ); +};