Skip to content

Commit

Permalink
Fix/8175 show tooltip instead of deposit guesstimate (#8184)
Browse files Browse the repository at this point in the history 
Co-authored-by: Rua Haszard <rua@automattic.com>
Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
  • Loading branch information
@haszari @Jinksi
3 people committed Mar 28, 2024
1 parent 83f703d commit a11548f
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 166 deletions.
4 changes: 4 additions & 0 deletions changelog/fix-8175-show-tooltip-instead-of-deposit-guesstimate
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Show an informative tooltip instead of estimating the next deposit date (which can be inaccurate).
47 changes: 13 additions & 34 deletions client/components/deposits-overview/deposit-schedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,11 @@ import moment from 'moment';
/**
* Internal dependencies
*/
import {
getDepositMonthlyAnchorLabel,
getNextDepositDate,
} from 'wcpay/deposits/utils';
import { getDepositMonthlyAnchorLabel } from 'wcpay/deposits/utils';
import type * as AccountOverview from 'wcpay/types/account-overview';

interface DepositScheduleProps {
depositsSchedule: AccountOverview.Account[ 'deposits_schedule' ];
showNextDepositDate?: boolean;
}
/**
* Renders the Deposit Schedule details component.
Expand All @@ -26,30 +22,16 @@ 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 an optional next deposit date message. */
/** translators: {{strong}}: placeholders are opening and closing strong tags. */
__(
'Available funds are automatically dispatched {{strong}}every day{{/strong}}%s.',
'Available funds are automatically dispatched {{strong}}every day{{/strong}}.',
'woocommerce-payments'
),
nextDepositDateString
)
),
components: {
strong: <strong />,
Expand All @@ -64,13 +46,12 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {

return interpolateComponents( {
mixedString: sprintf(
/** 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. */
/** translators: %1$s: is the day of the week. eg "Friday". {{strong}}: placeholders are opening and closing strong tags. */
__(
'Available funds are automatically dispatched {{strong}}every %1$s{{/strong}}%2$s.',
'Available funds are automatically dispatched {{strong}}every %1$s{{/strong}}.',
'woocommerce-payments'
),
dayOfWeek,
nextDepositDateString
dayOfWeek
),
components: {
strong: <strong />,
Expand All @@ -83,12 +64,11 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
if ( monthlyAnchor === 31 ) {
return interpolateComponents( {
mixedString: sprintf(
/** translators: {{strong}}: placeholders are opening and closing strong tags. %s: is an optional next deposit date message. */
/** translators: {{strong}}: placeholders are opening and closing strong tags. */
__(
'Available funds are automatically dispatched {{strong}}on the last day of every month{{/strong}}%s.',
'Available funds are automatically dispatched {{strong}}on the last day of every month{{/strong}}.',
'woocommerce-payments'
),
nextDepositDateString
)
),
components: {
strong: <strong />,
Expand All @@ -98,16 +78,15 @@ 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 an optional next deposit date message. */
/** translators: {{strong}}: placeholders are opening and closing strong tags. %1$s: is the day of the month. eg "31st". */
__(
'Available funds are automatically dispatched {{strong}}on the %1$s of every month{{/strong}}%2$s.',
'Available funds are automatically dispatched {{strong}}on the %1$s of every month{{/strong}}.',
'woocommerce-payments'
),
getDepositMonthlyAnchorLabel( {
monthlyAnchor: monthlyAnchor,
capitalize: false,
} ),
nextDepositDateString
} )
),
components: {
strong: <strong />,
Expand Down
80 changes: 79 additions & 1 deletion client/components/deposits-overview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
CardHeader,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import HelpOutlineIcon from 'gridicons/dist/help-outline';
import interpolateComponents from '@automattic/interpolate-components';

/**
* Internal dependencies.
Expand All @@ -18,6 +20,7 @@ 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';
Expand Down Expand Up @@ -106,6 +109,77 @@ const DepositsOverview: React.FC = () => {
return null;
}

const nextDepositHelpContent = (
<>
{ __(
'Deposits are initiated based on the following criteria:',
'woocommerce-payments'
) }
<ul>
<li>
{ interpolateComponents( {
mixedString: __(
'The {{link}}pending period{{/link}} in your country',
'woocommerce-payments'
),
components: {
link: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
rel="external noopener noreferrer"
target="_blank"
href={
'https://woo.com/document/woopayments/deposits/deposit-schedule/#pending-period-chart'
}
/>
),
},
} ) }
</li>
<li>
{ interpolateComponents( {
mixedString: __(
"Your account's {{link}}available funds{{/link}}",
'woocommerce-payments'
),
components: {
link: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
rel="external noopener noreferrer"
target="_blank"
href={
'https://woo.com/document/woopayments/deposits/deposit-schedule/#available-funds'
}
/>
),
},
} ) }
</li>
<li>
{ interpolateComponents( {
mixedString: __(
'Your {{link}}deposit schedule{{/link}} settings',
'woocommerce-payments'
),
components: {
link: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
rel="external noopener noreferrer"
target="_blank"
href={
'https://woo.com/document/woopayments/deposits/change-deposit-schedule/'
}
/>
),
},
} ) }
</li>
</ul>
</>
);

return (
<Card className="wcpay-deposits-overview">
<CardHeader>
Expand All @@ -117,7 +191,11 @@ const DepositsOverview: React.FC = () => {
<CardBody className="wcpay-deposits-overview__schedule__container">
<DepositSchedule
depositsSchedule={ account.deposits_schedule }
showNextDepositDate={ availableFunds > 0 }
/>
<ClickTooltip
content={ nextDepositHelpContent }
buttonIcon={ <HelpOutlineIcon /> }
buttonLabel={ 'Deposit schedule tooltip' }
/>
</CardBody>
) }
Expand Down
28 changes: 28 additions & 0 deletions client/components/deposits-overview/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,34 @@ exports[`Deposits Overview information Component Renders 1`] = `
every Monday
</strong>
.
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<div
aria-label="Deposit schedule tooltip"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
/>
</g>
</svg>
</div>
</div>
</button>
</div>
<div
class="components-card__body components-card-body wcpay-deposits-overview__notices__container css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
Expand Down
5 changes: 5 additions & 0 deletions client/components/tooltip/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@
a {
color: var( --wp-admin-theme-color, $gutenberg-blue );
}

ul {
list-style: inherit;
margin-left: 20px;
}
}

&--click {
Expand Down
51 changes: 0 additions & 51 deletions client/deposits/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@ import { __ } from '@wordpress/i18n';
import { dateI18n } from '@wordpress/date';
import moment from 'moment';

/**
* Internal dependencies
*/
import type * as AccountOverview from 'wcpay/types/account-overview';

const formatDate = ( format: string, date: number | string ) =>
dateI18n(
format,
Expand All @@ -34,7 +29,6 @@ export const getDepositMonthlyAnchorLabel = ( {
// If locale is set up as en_US or en_GB the ordinal will not show up
// More details can be found in https://github.com/WordPress/gutenberg/issues/15221/
// Using 'en' as the locale should be enough to workaround it
// see also getNextDepositDate
// TODO: This was resolved in WP 6.1. When the required version is 6.1 or higher, we can remove this workaround.
const fixedLocale = moment.locale().startsWith( 'en' )
? 'en'
Expand All @@ -53,48 +47,3 @@ export const getDepositMonthlyAnchorLabel = ( {
}
return label;
};

export const getNextDepositDate = (
depositSchedule: AccountOverview.Account[ 'deposits_schedule' ]
): string => {
// See comment on getDepositMonthlyAnchorLabel for why we're using 'en' as the locale
const fixedLocale = moment.locale().startsWith( 'en' )
? 'en'
: moment.locale();
const dateFormat = 'MMMM Do, YYYY';

// Create a base moment instance with the appropriate locale
const baseMoment = moment().locale( fixedLocale );
const today = baseMoment.clone();

switch ( depositSchedule.interval ) {
case 'daily':
return today.add( 1, 'days' ).format( dateFormat );
case 'weekly':
const weeklyAnchor = baseMoment.day(
depositSchedule.weekly_anchor
);
const nextWeeklyAnchor = weeklyAnchor.isAfter( today, 'day' )
? weeklyAnchor
: weeklyAnchor.add( 1, 'weeks' );
return nextWeeklyAnchor.format( dateFormat );
case 'monthly':
const nextDate = baseMoment.clone();

if ( today.date() >= depositSchedule.monthly_anchor ) {
nextDate
.date( 1 ) // set to the first of the month first, otherwise we could overshoot the next month
.add( 1, 'months' );
}

// Ensure the date isn't invalid (e.g., Feb 30). If it's invalid, set to the last day of the next month.
if ( nextDate.daysInMonth() < depositSchedule.monthly_anchor ) {
nextDate.endOf( 'month' );
} else {
nextDate.date( depositSchedule.monthly_anchor );
}
return nextDate.format( dateFormat );
default:
return __( '—', 'woocommerce-payments' );
}
};
Loading

0 comments on commit a11548f

Please sign in to comment.