Skip to content

Commit

Permalink
Merge release/6.9.2 into trunk
Browse files Browse the repository at this point in the history
  • Loading branch information
shendy-a8c committed Dec 14, 2023
2 parents d0b1494 + 7343bb2 commit 6fc7455
Showing 22 changed files with 671 additions and 72 deletions.
6 changes: 6 additions & 0 deletions changelog.txt
Original file line number Diff line number Diff line change
@@ -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

25 changes: 25 additions & 0 deletions client/components/deposits-overview/deposit-notices.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
36 changes: 24 additions & 12 deletions client/components/deposits-overview/deposit-schedule.tsx
Original file line number Diff line number Diff line change
@@ -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 />,
32 changes: 20 additions & 12 deletions client/components/deposits-overview/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />
) }
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 2 additions & 0 deletions client/components/deposits-overview/test/index.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
},
3 changes: 3 additions & 0 deletions client/components/tooltip/style.scss
Original file line number Diff line number Diff line change
@@ -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;
63 changes: 62 additions & 1 deletion client/deposits/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Loading

0 comments on commit 6fc7455

Please sign in to comment.