Skip to content

Commit

Permalink
refactor: move deposit schedule tooltip inside DepositSchedule so is …
Browse files Browse the repository at this point in the history 
…consistently displayed
  • Loading branch information
Rua Haszard committed Feb 23, 2024
1 parent 1e95e80 commit 07b4f5c
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 81 deletions.
98 changes: 96 additions & 2 deletions client/components/deposits-overview/deposit-schedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,25 @@ 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 { ClickTooltip } from 'components/tooltip';
import { 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 ) {
Expand Down Expand Up @@ -97,4 +100,95 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
}
};

/**
* Renders a summary of the deposit schedule so merchant understands when they will get paid.
*
* eg "Your deposits are dispatched automatically every day"
*/
const DepositSchedule: React.FC< DepositScheduleProps > = ( {
depositsSchedule,
} ) => {
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 (
<>
<DepositScheduleSummary depositsSchedule={ depositsSchedule } />
<ClickTooltip
content={ nextDepositHelpContent }
buttonIcon={ <HelpOutlineIcon /> }
buttonLabel={ 'Deposit schedule tooltip' }
/>
</>
);
};

export default DepositSchedule;
79 changes: 0 additions & 79 deletions client/components/deposits-overview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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';
Expand Down Expand Up @@ -109,77 +106,6 @@ 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 @@ -192,11 +118,6 @@ const DepositsOverview: React.FC = () => {
<DepositSchedule
depositsSchedule={ account.deposits_schedule }
/>
<ClickTooltip
content={ nextDepositHelpContent }
buttonIcon={ <HelpOutlineIcon /> }
buttonLabel={ 'Deposit schedule tooltip' }
/>
</CardBody>
) }

Expand Down

0 comments on commit 07b4f5c

Please sign in to comment.