diff --git a/changelog.txt b/changelog.txt index 18c98319d74..73e649d188e 100644 --- a/changelog.txt +++ b/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 diff --git a/client/components/deposits-overview/deposit-notices.tsx b/client/components/deposits-overview/deposit-notices.tsx index 7a38783a33b..86f0de918a0 100644 --- a/client/components/deposits-overview/deposit-notices.tsx +++ b/client/components/deposits-overview/deposit-notices.tsx @@ -150,3 +150,28 @@ export const NegativeBalanceDepositsPausedNotice: React.FC = () => ( } ) } ); + +/** + * Renders a notice informing the user that deposits only occur when there are funds available. + */ +export const NoFundsAvailableForDepositNotice: React.FC = () => ( + + { 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 + + ), + }, + } ) } + +); diff --git a/client/components/deposits-overview/deposit-schedule.tsx b/client/components/deposits-overview/deposit-schedule.tsx index c7eae7bca78..8ae6546655c 100644 --- a/client/components/deposits-overview/deposit-schedule.tsx +++ b/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: , @@ -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: , @@ -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: , @@ -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: , diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx index 27c754c0640..8ab797f4977 100644 --- a/client/components/deposits-overview/index.tsx +++ b/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 = () => { { /* Deposit schedule message */ } - { isNextDepositExpected && !! account && ( + { isDepositsUnrestricted && !! account && ( 0 } /> ) } @@ -112,12 +115,17 @@ const DepositsOverview: React.FC = () => { ) : ( <> - { isNextDepositExpected && ( - - ) } + { isDepositsUnrestricted && + ! isDepositAwaitingPendingFunds && ( + + ) } { ! hasCompletedWaitingPeriod && ( ) } + { hasCompletedWaitingPeriod && + isDepositAwaitingPendingFunds && ( + + ) } { isNegativeBalanceDepositsPaused && ( ) } diff --git a/client/components/deposits-overview/test/__snapshots__/index.tsx.snap b/client/components/deposits-overview/test/__snapshots__/index.tsx.snap index 9dcdb85548d..6b4db19d73c 100644 --- a/client/components/deposits-overview/test/__snapshots__/index.tsx.snap +++ b/client/components/deposits-overview/test/__snapshots__/index.tsx.snap @@ -17,11 +17,65 @@ exports[`Deposits Overview information Component Renders 1`] = ` > Deposits +
+ Available funds are automatically dispatched + + every Monday + + . +
+ > +
+
+
+
+ +
+
+ It may take 1-3 business days for deposits to reach your bank account. +
+
+
+
+
+
{ global.wcpaySettings = { accountStatus: { deposits: { + restrictions: 'deposits_unrestricted', completed_waiting_period: true, }, }, diff --git a/client/components/tooltip/style.scss b/client/components/tooltip/style.scss index aa0cfe52062..26730944226 100644 --- a/client/components/tooltip/style.scss +++ b/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; diff --git a/client/deposits/index.tsx b/client/deposits/index.tsx index ae5ba238679..7f6e5c30f14 100644 --- a/client/deposits/index.tsx +++ b/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 ( + + + + ); +}; + const DepositsPage: React.FC = () => { return ( + ); diff --git a/client/globals.d.ts b/client/globals.d.ts index eaffe24b8b6..4f791a70795 100644 --- a/client/globals.d.ts +++ b/client/globals.d.ts @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { +import type { MccsDisplayTreeItem, Country, OnboardingFields, @@ -31,6 +31,10 @@ declare global { paymentsEnabled?: boolean; deposits?: { status: string; + restrictions: + | 'deposits_unrestricted' + | 'deposits_blocked' + | 'schedule_restricted'; interval: string; weekly_anchor: string; monthly_anchor: null | number; @@ -116,6 +120,7 @@ declare global { isStripeBillingEligible: boolean; capabilityRequestNotices: Record< string, boolean >; storeName: string; + isNextDepositNoticeDismissed: boolean; }; const wcTracks: any; diff --git a/client/transactions/list/deposit.tsx b/client/transactions/list/deposit.tsx index c0604f0b097..09ceb108ca9 100644 --- a/client/transactions/list/deposit.tsx +++ b/client/transactions/list/deposit.tsx @@ -3,18 +3,27 @@ /** * External dependencies */ -import { dateI18n } from '@wordpress/date'; +import React from 'react'; import moment from 'moment'; +import { dateI18n } from '@wordpress/date'; +import { __ } from '@wordpress/i18n'; +import interpolateComponents from '@automattic/interpolate-components'; +import { ExternalLink } from '@wordpress/components'; import { Link } from '@woocommerce/components'; -import React from 'react'; -import { getAdminUrl } from 'wcpay/utils'; +import InfoOutlineIcon from 'gridicons/dist/info-outline'; + +/** + * Internal dependencies + */ +import { getAdminUrl } from 'utils'; +import { ClickTooltip } from 'components/tooltip'; interface DepositProps { depositId?: string; dateAvailable?: string; } -const Deposit = ( { depositId, dateAvailable }: DepositProps ): JSX.Element => { +const Deposit: React.FC< DepositProps > = ( { depositId, dateAvailable } ) => { if ( depositId && dateAvailable && @@ -35,7 +44,26 @@ const Deposit = ( { depositId, dateAvailable }: DepositProps ): JSX.Element => { return { formattedDateAvailable }; } - return <>; + // Show an icon with a tooltip to communicate that the deposit will be available in the future. + return ( + <> + { __( 'Future deposit', 'woocommerce-payments' ) } + + ), + }, + } ) } + buttonIcon={ } + /> + + ); }; export default Deposit; diff --git a/client/transactions/list/index.tsx b/client/transactions/list/index.tsx index 822047a4afd..8b66096a60c 100644 --- a/client/transactions/list/index.tsx +++ b/client/transactions/list/index.tsx @@ -333,12 +333,6 @@ export const TransactionsList = ( txn.customer_email ); - const deposit = ( - - ); const currency = txn.currency.toUpperCase(); const dataType = txn.metadata ? txn.metadata.charge_type : txn.type; @@ -378,14 +372,21 @@ export const TransactionsList = ( }; }; - const depositStatus = txn.deposit_status - ? displayDepositStatus[ txn.deposit_status ] - : ''; - const isFinancingType = -1 !== [ 'financing_payout', 'financing_paydown' ].indexOf( txn.type ); + const deposit = ! isFinancingType && ( + + ); + + const depositStatus = txn.deposit_status + ? displayDepositStatus[ txn.deposit_status ] + : ''; + // Map transaction into table row. const data = { transaction_id: { diff --git a/client/transactions/list/test/__snapshots__/deposit.tsx.snap b/client/transactions/list/test/__snapshots__/deposit.tsx.snap index ff5e2f4fb9d..5aae20de2e7 100644 --- a/client/transactions/list/test/__snapshots__/deposit.tsx.snap +++ b/client/transactions/list/test/__snapshots__/deposit.tsx.snap @@ -11,10 +11,101 @@ exports[`Deposit renders with date and deposit available 1`] = `
`; -exports[`Deposit renders with date available but no deposit 1`] = `
`; - -exports[`Deposit renders with deposit but no date available 1`] = `
`; +exports[`Deposit renders with date available but no deposit 1`] = ` +
+ Future deposit + +
+`; -exports[`Deposit renders with estimated date and deposit available 1`] = `
`; +exports[`Deposit renders with deposit but no date available 1`] = ` +
+ Future deposit + +
+`; -exports[`Deposit renders with no date or deposit available 1`] = `
`; +exports[`Deposit renders with no date or deposit available 1`] = ` +
+ Future deposit + +
+`; diff --git a/client/transactions/list/test/__snapshots__/index.tsx.snap b/client/transactions/list/test/__snapshots__/index.tsx.snap index 2f460c0f997..35b86a155f7 100644 --- a/client/transactions/list/test/__snapshots__/index.tsx.snap +++ b/client/transactions/list/test/__snapshots__/index.tsx.snap @@ -610,7 +610,36 @@ exports[`Transactions list renders correctly when can filter by several currenci + > + Future deposit + + + > + Future deposit + + @@ -1541,7 +1599,36 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` + > + Future deposit + + + > + Future deposit + + @@ -3172,7 +3288,36 @@ exports[`Transactions list subscription column renders correctly 1`] = ` + > + Future deposit + + + > + Future deposit + + @@ -4151,7 +4325,36 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = + > + Future deposit + + + > + Future deposit + + @@ -5124,7 +5356,36 @@ exports[`Transactions list when not filtered by deposit renders table summary on + > + Future deposit + + + > + Future deposit + + diff --git a/client/transactions/list/test/deposit.tsx b/client/transactions/list/test/deposit.tsx index 478baa171a6..2cb87b0b248 100644 --- a/client/transactions/list/test/deposit.tsx +++ b/client/transactions/list/test/deposit.tsx @@ -19,16 +19,6 @@ describe( 'Deposit', () => { expect( link ).toMatchSnapshot(); } ); - test( 'renders with estimated date and deposit available', () => { - const { container: link } = render( - - ); - expect( link ).toMatchSnapshot(); - } ); - test( 'renders with date available but no deposit', () => { const { container: link } = render( diff --git a/includes/admin/class-wc-payments-admin.php b/includes/admin/class-wc-payments-admin.php index 153746bd832..0dc167c4aca 100644 --- a/includes/admin/class-wc-payments-admin.php +++ b/includes/admin/class-wc-payments-admin.php @@ -877,6 +877,7 @@ private function get_js_settings(): array { 'isStripeBillingEligible' => WC_Payments_Features::is_stripe_billing_eligible(), 'capabilityRequestNotices' => get_option( 'wcpay_capability_request_dismissed_notices ', [] ), 'storeName' => get_bloginfo( 'name' ), + 'isNextDepositNoticeDismissed' => WC_Payments_Features::is_next_deposit_notice_dismissed(), ]; return apply_filters( 'wcpay_js_settings', $this->wcpay_js_settings ); diff --git a/includes/admin/class-wc-rest-payments-settings-controller.php b/includes/admin/class-wc-rest-payments-settings-controller.php index 1025c697990..057af86e3f5 100644 --- a/includes/admin/class-wc-rest-payments-settings-controller.php +++ b/includes/admin/class-wc-rest-payments-settings-controller.php @@ -773,6 +773,11 @@ private function update_account( WP_REST_Request $request ) { $updated_fields['deposit_schedule_interval'] = $this->wcpay_gateway->get_option( 'deposit_schedule_interval' ); } + // If we are updating any deposit schedule values, we should invalidate the next deposit notice dismissed notice option. + if ( preg_grep( '/^deposit_schedule_/', array_keys( $updated_fields ) ) ) { + delete_option( 'wcpay_next_deposit_notice_dismissed' ); + } + return $this->wcpay_gateway->update_account_settings( $updated_fields ); } diff --git a/includes/class-wc-payments-features.php b/includes/class-wc-payments-features.php index 416cac38831..904164421e0 100644 --- a/includes/class-wc-payments-features.php +++ b/includes/class-wc-payments-features.php @@ -351,6 +351,15 @@ public static function is_dispute_issuer_evidence_enabled(): bool { return '1' === get_option( self::DISPUTE_ISSUER_EVIDENCE, '0' ); } + /** + * Checks whether the next deposit notice on the deposits list screen has been dismissed. + * + * @return bool + */ + public static function is_next_deposit_notice_dismissed(): bool { + return '1' === get_option( 'wcpay_next_deposit_notice_dismissed', '0' ); + } + /** * Returns feature flags as an array suitable for display on the front-end. * diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php index 69e684e4343..3240310752a 100644 --- a/includes/class-wc-payments.php +++ b/includes/class-wc-payments.php @@ -1645,6 +1645,7 @@ public static function add_wcpay_options_to_woocommerce_permissions_list( $permi 'wcpay_fraud_protection_welcome_tour_dismissed', 'wcpay_capability_request_dismissed_notices', 'wcpay_onboarding_eligibility_modal_dismissed', + 'wcpay_next_deposit_notice_dismissed', ], true ); diff --git a/package-lock.json b/package-lock.json index 71e547a4303..7e7375967b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "woocommerce-payments", - "version": "6.9.1", + "version": "6.9.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "woocommerce-payments", - "version": "6.9.1", + "version": "6.9.2", "hasInstallScript": true, "license": "GPL-3.0-or-later", "dependencies": { diff --git a/package.json b/package.json index 905e6bbbe01..d80cfbe4bd0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "woocommerce-payments", - "version": "6.9.1", + "version": "6.9.2", "main": "webpack.config.js", "author": "Automattic", "license": "GPL-3.0-or-later", diff --git a/readme.txt b/readme.txt index e7f21908b84..8a57aead24b 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: woocommerce payments, apple pay, credit card, google pay, payment, payment Requires at least: 6.0 Tested up to: 6.4 Requires PHP: 7.3 -Stable tag: 6.9.1 +Stable tag: 6.9.2 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -94,6 +94,13 @@ Please note that our support for the checkout block is still experimental and th == 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 diff --git a/woocommerce-payments.php b/woocommerce-payments.php index e135eef1a56..df1a348ec90 100644 --- a/woocommerce-payments.php +++ b/woocommerce-payments.php @@ -12,7 +12,7 @@ * WC tested up to: 8.3.1 * Requires at least: 6.0 * Requires PHP: 7.3 - * Version: 6.9.1 + * Version: 6.9.2 * * @package WooCommerce\Payments */