Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transactions List - indicate when a transaction is expected to be included in a future deposit #7878

Merged
merged 15 commits into from
Dec 13, 2023
Merged

Transactions List - indicate when a transaction is expected to be included in a future deposit #7878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f9c57ee
Tranasaction list: indicate when part of future deposit
Jinksi Dec 11, 2023
fcd0285
Tranasaction list: indicate when part of future deposit
Jinksi Dec 11, 2023
ecd2843
Add changelog entry
Jinksi Dec 12, 2023
8a62018
Remove redundant estimated deposit test
Jinksi Dec 12, 2023
6f7cd12
Update snapshot tests
Jinksi Dec 12, 2023
be3c24a
Don't show "Future deposit" for financing transactions
Jinksi Dec 12, 2023
4b4f75e
Show tooltip message rather than "Future deposit"
Jinksi Dec 12, 2023
c7fa489
Update version and add changelog entries for release 6.9.2
github-actions[bot] Dec 13, 2023
6db0f28
Merge branch 'release/6.9.2' into add/transaction-list-future-deposit
Jinksi Dec 13, 2023
1667c53
Reorder const declarations to keep deposits together
Jinksi Dec 13, 2023
9976a65
Add learn more link to tooltip content
Jinksi Dec 13, 2023
fe0d132
Update tooltip content wording
Jinksi Dec 13, 2023
51e8716
Add "Future deposit" string alongside tooltip icon
Jinksi Dec 13, 2023
276d3eb
Merge branch 'release/6.9.2' into add/transaction-list-future-deposit
Jinksi Dec 13, 2023
6b97f48
Reorder imports
Jinksi Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/add-transaction-list-future-deposit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Transactions List - indicate when a transaction is expected to be included in a future deposit
38 changes: 33 additions & 5 deletions client/transactions/list/deposit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand All @@ -35,7 +44,26 @@ const Deposit = ( { depositId, dateAvailable }: DepositProps ): JSX.Element => {
return <Link href={ depositUrl }>{ formattedDateAvailable }</Link>;
}

return <></>;
// Show an icon with a tooltip to communicate that the deposit will be available in the future.
return (
<>
{ __( 'Future deposit', 'woocommerce-payments' ) }
<ClickTooltip
content={ interpolateComponents( {
mixedString: __(
'This transaction will be included in an upcoming automated deposit. The date of the deposit will be displayed here once it is scheduled. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
'woocommerce-payments'
),
components: {
learnMoreLink: (
<ExternalLink href="https://woo.com/document/woopayments/deposits/deposit-schedule/#pending-funds" />
),
},
} ) }
buttonIcon={ <InfoOutlineIcon /> }
/>
</>
);
};

export default Deposit;
21 changes: 11 additions & 10 deletions client/transactions/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,12 +329,6 @@
txn.customer_email
);

const deposit = (
<Deposit
depositId={ txn.deposit_id ?? '' }
dateAvailable={ txn.available_on }
/>
);
const currency = txn.currency.toUpperCase();

const dataType = txn.metadata ? txn.metadata.charge_type : txn.type;
Expand Down Expand Up @@ -372,14 +366,21 @@
};
};

const depositStatus = txn.deposit_status
? displayDepositStatus[ txn.deposit_status ]
: '';

const isFinancingType =
-1 !==
[ 'financing_payout', 'financing_paydown' ].indexOf( txn.type );

const deposit = ! isFinancingType && (
<Deposit
depositId={ txn.deposit_id }
dateAvailable={ txn.available_on }
/>
);

const depositStatus = txn.deposit_status
? displayDepositStatus[ txn.deposit_status ]
: '';

// Map transaction into table row.
const data = {
transaction_id: {
Expand Down Expand Up @@ -586,7 +587,7 @@
) {
try {
const {
exported_transactions: exportedTransactions,

Check warning on line 590 in client/transactions/list/index.tsx

View workflow job for this annotation

GitHub Actions / JS linting 

'exportedTransactions' is assigned a value but never used
} = await apiFetch( {
path: getTransactionsCSV( {
userEmail,
Expand Down
5 changes: 5 additions & 0 deletions client/transactions/list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ $space-header-item: 12px;
top: 3px;
left: 8px;
}
.woocommerce-table__item {
.wcpay-tooltip__content-wrapper {
white-space: normal;
}
}
}

/**
Expand Down
101 changes: 96 additions & 5 deletions client/transactions/list/test/__snapshots__/deposit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,101 @@ exports[`Deposit renders with date and deposit available 1`] = `
</div>
`;

exports[`Deposit renders with date available but no deposit 1`] = `<div />`;

exports[`Deposit renders with deposit but no date available 1`] = `<div />`;
exports[`Deposit renders with date available but no deposit 1`] = `
<div>
Future deposit
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<div
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-info-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
/>
</g>
</svg>
</div>
</div>
</button>
</div>
`;

exports[`Deposit renders with estimated date and deposit available 1`] = `<div />`;
exports[`Deposit renders with deposit but no date available 1`] = `
<div>
Future deposit
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<div
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-info-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
/>
</g>
</svg>
</div>
</div>
</button>
</div>
`;

exports[`Deposit renders with no date or deposit available 1`] = `<div />`;
exports[`Deposit renders with no date or deposit available 1`] = `
<div>
Future deposit
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<div
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-info-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
/>
</g>
</svg>
</div>
</div>
</button>
</div>
`;
Loading
Loading