From daf79d50370d7fa0cdf8a0ece2aada38d6a1cf8d Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Sun, 10 Nov 2024 12:46:17 +0700 Subject: [PATCH] Rename 'Deposit' to 'Payout' (feature branch) (#9606) Co-authored-by: Nagesh Pai <4162931+nagpai@users.noreply.github.com> Co-authored-by: Nagesh Pai Co-authored-by: bruce aldridge Co-authored-by: Rua Haszard Co-authored-by: Rua Haszard Co-authored-by: Jessy Pappachan <32092402+jessy-p@users.noreply.github.com> Co-authored-by: Jessy Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com> --- changelog/add-9673-payouts-rename-notice | 5 + changelog/dev-1-9601-rename-deposit-dev-docs | 5 + changelog/feature-deposits-payouts-rename | 4 + changelog/fix-9525-menu-url-payouts-rename | 5 + changelog/fix-9527-payouts-rename-settings | 5 + ...2-rename-payouts-instant-depost-modal-flow | 5 + changelog/fix-9573-rename-payout-tos-modal | 5 + changelog/fix-9585-rename-instant-payouts | 5 + .../fix-9588-rename-payouts-error-messages | 5 + changelog/fix-payout-rename-account-errors | 5 + .../update-9524-deposit-payout-deposits-list | 5 + ...transactions-list-deposit-to-payout-rename | 5 + ...nsaction-timeline-deposit-to-payout-rename | 5 + ...date-9578-79-rename-deposit-overview-modal | 5 + ...te-9581-rename-deposit-onboarding-tasklist | 5 + changelog/update-9587-doc-url-payout-rename | 5 + .../account-balances/balance-tooltip.tsx | 4 +- client/components/account-balances/index.tsx | 19 +- client/components/account-balances/strings.ts | 2 +- .../account-balances/test/index.test.tsx | 8 +- .../account-status/account-tools/strings.tsx | 2 +- .../test/__snapshots__/index.test.tsx.snap | 2 +- client/components/account-status/index.js | 2 +- .../components/account-status/status-chip.js | 2 +- .../test/__snapshots__/index.js.snap | 8 +- .../deposits-overview/deposit-notices.tsx | 24 +- .../deposits-overview/deposit-schedule.tsx | 12 +- client/components/deposits-overview/index.tsx | 16 +- .../recent-deposits-list.tsx | 2 +- .../test/__snapshots__/index.tsx.snap | 26 +- .../deposits-overview/test/index.tsx | 34 +-- client/components/deposits-status/index.tsx | 2 +- .../test/__snapshots__/index.js.snap | 6 +- client/components/details-link/index.tsx | 2 +- .../test/__snapshots__/index.test.tsx.snap | 2 +- .../details-link/test/index.test.tsx | 4 +- .../modal/index.tsx | 2 +- client/components/test-mode-notice/index.tsx | 6 +- .../test/__snapshots__/index.tsx.snap | 2 +- client/connect-account-page/strings.tsx | 8 +- .../test/__snapshots__/index.test.tsx.snap | 12 +- .../test/info-notice-modal.test.tsx | 2 +- client/data/deposits/actions.js | 6 +- client/data/deposits/resolvers.js | 6 +- client/deposits/details/index.tsx | 18 +- .../details/test/__snapshots__/index.tsx.snap | 12 +- client/deposits/details/test/index.tsx | 4 +- client/deposits/filters/config.js | 27 +- client/deposits/filters/index.js | 2 +- client/deposits/filters/test/index.js | 18 +- client/deposits/index.tsx | 4 +- .../index.tsx | 12 +- .../modal.tsx | 30 +-- .../style.scss | 8 +- .../test/__snapshots__/index.tsx.snap | 26 +- .../test/index.tsx | 8 +- client/deposits/list/index.tsx | 16 +- .../list/test/__snapshots__/index.tsx.snap | 96 +++---- client/deposits/list/test/index.tsx | 2 +- .../deposits/rename-notice/header-image.svg | 30 +++ client/deposits/rename-notice/index.tsx | 88 +++++++ client/deposits/rename-notice/style.scss | 77 ++++++ .../test/__snapshots__/index.tsx.snap | 9 + client/deposits/rename-notice/test/index.tsx | 49 ++++ client/deposits/strings.ts | 2 +- client/globals.d.ts | 1 + client/index.js | 14 +- client/overview/index.js | 2 + .../index.tsx | 6 +- .../test/index.test.tsx | 2 +- .../overview/modal/reset-account/strings.tsx | 2 +- .../modal/update-business-details/strings.tsx | 4 +- .../test/__snapshots__/index.tsx.snap | 6 +- client/overview/task-list/strings.tsx | 14 +- .../task-list/tasks/test/po-tasks.tsx | 18 +- .../tasks/update-business-details-task.tsx | 6 +- client/overview/task-list/test/tasks.js | 4 +- client/overview/test/index.js | 20 ++ client/payment-details/timeline/map-events.js | 34 +-- .../timeline/test/__snapshots__/index.js.snap | 20 +- .../test/__snapshots__/map-events.js.snap | 64 ++--- client/settings/deposits/index.js | 22 +- client/settings/deposits/test/index.test.js | 26 +- client/settings/settings-manager/index.js | 8 +- client/tos/modal/index.js | 2 +- .../modal/test/__snapshots__/index.js.snap | 2 +- client/transactions/list/deposit.tsx | 10 +- client/transactions/list/index.tsx | 16 +- .../list/test/__snapshots__/deposit.tsx.snap | 16 +- .../list/test/__snapshots__/index.tsx.snap | 80 +++--- client/transactions/list/test/deposit.tsx | 8 +- client/transactions/list/test/index.tsx | 18 +- composer.lock | 242 +++++++++--------- docs/dependencies.md | 2 +- .../wp-api-v3/{deposits.md => payouts.md} | 91 +++---- .../source/includes/wp-api-v3/reports.md | 4 +- docs/rest-api/source/index.html.md | 2 +- includes/admin/class-wc-payments-admin.php | 32 ++- .../class-wc-payments-captured-event-note.php | 2 +- includes/class-wc-payments-features.php | 9 + .../class-wc-payments-onboarding-service.php | 12 +- ...wc-payments-webhook-processing-service.php | 2 +- includes/class-wc-payments.php | 1 + ...yments-notes-instant-deposits-eligible.php | 10 +- readme.txt | 2 +- tests/e2e-pw/README.md | 4 +- ...elect-deposits-list-advanced-filters-1.png | Bin 16022 -> 15848 bytes .../merchant/merchant-admin-deposits.spec.ts | 10 +- tests/e2e/utils/flows.js | 2 +- .../fixtures/captured-payments/discount.json | 2 +- .../captured-payments/foreign-card.json | 2 +- .../captured-payments/fx-decimal.json | 2 +- .../captured-payments/fx-foreign-card.json | 2 +- .../captured-payments/fx-partial-capture.json | 2 +- .../captured-payments/fx-with-capped-fee.json | 2 +- tests/fixtures/captured-payments/fx.json | 2 +- .../captured-payments/jpy-payment.json | 2 +- .../captured-payments/only-base-fee.json | 2 +- .../captured-payments/partial-capture.json | 2 +- .../captured-payments/subscription.json | 2 +- .../admin/test-class-wc-payments-admin.php | 4 +- ...wc-payments-webhook-processing-service.php | 2 +- 122 files changed, 1060 insertions(+), 660 deletions(-) create mode 100644 changelog/add-9673-payouts-rename-notice create mode 100644 changelog/dev-1-9601-rename-deposit-dev-docs create mode 100644 changelog/feature-deposits-payouts-rename create mode 100644 changelog/fix-9525-menu-url-payouts-rename create mode 100644 changelog/fix-9527-payouts-rename-settings create mode 100644 changelog/fix-9542-rename-payouts-instant-depost-modal-flow create mode 100644 changelog/fix-9573-rename-payout-tos-modal create mode 100644 changelog/fix-9585-rename-instant-payouts create mode 100644 changelog/fix-9588-rename-payouts-error-messages create mode 100644 changelog/fix-payout-rename-account-errors create mode 100644 changelog/update-9524-deposit-payout-deposits-list create mode 100644 changelog/update-9543-transactions-list-deposit-to-payout-rename create mode 100644 changelog/update-9564-transaction-timeline-deposit-to-payout-rename create mode 100644 changelog/update-9578-79-rename-deposit-overview-modal create mode 100644 changelog/update-9581-rename-deposit-onboarding-tasklist create mode 100644 changelog/update-9587-doc-url-payout-rename rename client/deposits/{instant-deposits => instant-payouts}/index.tsx (84%) rename client/deposits/{instant-deposits => instant-payouts}/modal.tsx (68%) rename client/deposits/{instant-deposits => instant-payouts}/style.scss (74%) rename client/deposits/{instant-deposits => instant-payouts}/test/__snapshots__/index.tsx.snap (70%) rename client/deposits/{instant-deposits => instant-payouts}/test/index.tsx (90%) create mode 100644 client/deposits/rename-notice/header-image.svg create mode 100644 client/deposits/rename-notice/index.tsx create mode 100644 client/deposits/rename-notice/style.scss create mode 100644 client/deposits/rename-notice/test/__snapshots__/index.tsx.snap create mode 100644 client/deposits/rename-notice/test/index.tsx rename docs/rest-api/source/includes/wp-api-v3/{deposits.md => payouts.md} (70%) diff --git a/changelog/add-9673-payouts-rename-notice b/changelog/add-9673-payouts-rename-notice new file mode 100644 index 00000000000..31a258dee71 --- /dev/null +++ b/changelog/add-9673-payouts-rename-notice @@ -0,0 +1,5 @@ +Significance: patch +Type: add +Comment: Added notice to indicate the rename of Deposits to Payouts. User facing changelog will be added as part of feature branch + + diff --git a/changelog/dev-1-9601-rename-deposit-dev-docs b/changelog/dev-1-9601-rename-deposit-dev-docs new file mode 100644 index 00000000000..bd7141bb971 --- /dev/null +++ b/changelog/dev-1-9601-rename-deposit-dev-docs @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Rename 'deposit' to 'payout' within the developer doc description texts. The change is a part of a larger renaming project. + + diff --git a/changelog/feature-deposits-payouts-rename b/changelog/feature-deposits-payouts-rename new file mode 100644 index 00000000000..cd080e4557b --- /dev/null +++ b/changelog/feature-deposits-payouts-rename @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Rename 'deposit' to 'payout' across various places in the WooPayments admin UI, docs and doc URLs. diff --git a/changelog/fix-9525-menu-url-payouts-rename b/changelog/fix-9525-menu-url-payouts-rename new file mode 100644 index 00000000000..51956b98d3b --- /dev/null +++ b/changelog/fix-9525-menu-url-payouts-rename @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Part of feature Renaming deposits to payouts + + diff --git a/changelog/fix-9527-payouts-rename-settings b/changelog/fix-9527-payouts-rename-settings new file mode 100644 index 00000000000..7690c2fee06 --- /dev/null +++ b/changelog/fix-9527-payouts-rename-settings @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Payouts rename: Settings page, part of a larger change + + diff --git a/changelog/fix-9542-rename-payouts-instant-depost-modal-flow b/changelog/fix-9542-rename-payouts-instant-depost-modal-flow new file mode 100644 index 00000000000..5d97529f78a --- /dev/null +++ b/changelog/fix-9542-rename-payouts-instant-depost-modal-flow @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Part of a larger change - renaming deposit to payout; this PR fixes instant payout modal + button + + diff --git a/changelog/fix-9573-rename-payout-tos-modal b/changelog/fix-9573-rename-payout-tos-modal new file mode 100644 index 00000000000..839d4364380 --- /dev/null +++ b/changelog/fix-9573-rename-payout-tos-modal @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Rename Deposit to Payout in TOS modal. Changelog to be included in featture branch + + diff --git a/changelog/fix-9585-rename-instant-payouts b/changelog/fix-9585-rename-instant-payouts new file mode 100644 index 00000000000..029812b1b97 --- /dev/null +++ b/changelog/fix-9585-rename-instant-payouts @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Renamed instant deposit to instant payout. Main changelog will be part of feature branch + + diff --git a/changelog/fix-9588-rename-payouts-error-messages b/changelog/fix-9588-rename-payouts-error-messages new file mode 100644 index 00000000000..c20e31649e1 --- /dev/null +++ b/changelog/fix-9588-rename-payouts-error-messages @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Updated the payouts component error notices. User facing changelog will be on the feature branch. + + diff --git a/changelog/fix-payout-rename-account-errors b/changelog/fix-payout-rename-account-errors new file mode 100644 index 00000000000..5d661f369d7 --- /dev/null +++ b/changelog/fix-payout-rename-account-errors @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Renamed deposit to Payout in account error messages. Main changelog will be added on feature branch. + + diff --git a/changelog/update-9524-deposit-payout-deposits-list b/changelog/update-9524-deposit-payout-deposits-list new file mode 100644 index 00000000000..e25a0d70f23 --- /dev/null +++ b/changelog/update-9524-deposit-payout-deposits-list @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Change deposit to payout in deposits list page. + + diff --git a/changelog/update-9543-transactions-list-deposit-to-payout-rename b/changelog/update-9543-transactions-list-deposit-to-payout-rename new file mode 100644 index 00000000000..72b9c3ffa67 --- /dev/null +++ b/changelog/update-9543-transactions-list-deposit-to-payout-rename @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Update 'deposit' to 'payout' in UI labels of the transaction list. This PR is a part of a project doing this rename across all parts of the UI. + + diff --git a/changelog/update-9564-transaction-timeline-deposit-to-payout-rename b/changelog/update-9564-transaction-timeline-deposit-to-payout-rename new file mode 100644 index 00000000000..d143380b730 --- /dev/null +++ b/changelog/update-9564-transaction-timeline-deposit-to-payout-rename @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Part of a larger change to change 'deposit' to 'payout'. This PR specificially changes it for the transaction details timeline. + + diff --git a/changelog/update-9578-79-rename-deposit-overview-modal b/changelog/update-9578-79-rename-deposit-overview-modal new file mode 100644 index 00000000000..0eca2ef1120 --- /dev/null +++ b/changelog/update-9578-79-rename-deposit-overview-modal @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Rename 'deposit' to 'payout' in modals within 'Overview' section. PR is a part of a larger renaming project. + + diff --git a/changelog/update-9581-rename-deposit-onboarding-tasklist b/changelog/update-9581-rename-deposit-onboarding-tasklist new file mode 100644 index 00000000000..a6f4c688343 --- /dev/null +++ b/changelog/update-9581-rename-deposit-onboarding-tasklist @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Rename 'deposit' to 'payout' within the onboarding tasklist section. The change is a part of a larger project of doing this rename across the codebase. + + diff --git a/changelog/update-9587-doc-url-payout-rename b/changelog/update-9587-doc-url-payout-rename new file mode 100644 index 00000000000..62933e0a818 --- /dev/null +++ b/changelog/update-9587-doc-url-payout-rename @@ -0,0 +1,5 @@ +Significance: patch +Type: update +Comment: Update 'deposit' to 'payout' in URLs of WooPayments docs occuring across the codebase. Part of a larger renaming project. + + diff --git a/client/components/account-balances/balance-tooltip.tsx b/client/components/account-balances/balance-tooltip.tsx index 257d041ca3c..2bf267856f6 100644 --- a/client/components/account-balances/balance-tooltip.tsx +++ b/client/components/account-balances/balance-tooltip.tsx @@ -36,7 +36,7 @@ export const TotalBalanceTooltip: React.FC< TotalBalanceTooltipProps > = ( { <> { interpolateComponents( { mixedString: __( - '{{bold}}Total balance{{/bold}} combines both pending funds (transactions under processing) and available funds (ready for deposit). {{learnMoreLink}}Learn more{{/learnMoreLink}}', + '{{bold}}Total balance{{/bold}} combines both pending funds (transactions under processing) and available funds (ready for payout). {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), components: { @@ -105,7 +105,7 @@ export const AvailableBalanceTooltip: React.FC< AvailableBalanceTooltipProps > =

{ interpolateComponents( { mixedString: __( - '{{bold}}Available funds{{/bold}} have completed processing and are ready to be deposited into your bank account. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + '{{bold}}Available funds{{/bold}} have completed processing and are ready to be dispatched to your bank account. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), components: { diff --git a/client/components/account-balances/index.tsx b/client/components/account-balances/index.tsx index fa3be8b8422..a72f884bed8 100644 --- a/client/components/account-balances/index.tsx +++ b/client/components/account-balances/index.tsx @@ -15,7 +15,7 @@ import type * as AccountOverview from 'wcpay/types/account-overview'; import BalanceBlock from './balance-block'; import HelpOutlineIcon from 'gridicons/dist/help-outline'; import InlineNotice from '../inline-notice'; -import InstantDepositButton from 'deposits/instant-deposits'; +import InstantPayoutButton from 'wcpay/deposits/instant-payouts'; import SendMoneyIcon from 'assets/images/icons/send-money.svg?asset'; import { TotalBalanceTooltip, @@ -154,9 +154,8 @@ const AccountBalances: React.FC = () => { > { sprintf( __( - /* translators: %$1$s: Available instant deposit amount, %2$s: Instant deposit fee percentage */ - /* 'Instantly deposit %1$s and get funds in your bank account in 30 mins for a %2$s%% fee.' */ - 'Get %1$s via instant deposit. Funds are typically in your bank account within 30 mins. Fee: %2$s%%.', + /* translators: %$1$s: Available instant payout amount, %2$s: Instant payout fee percentage */ + 'Get %1$s via instant payout. Funds are typically in your bank account within 30 mins. Fee: %2$s%%.', 'woocommerce-payments' ), formatCurrency( @@ -170,7 +169,7 @@ const AccountBalances: React.FC = () => { ) } - { } buttonLabel={ __( - 'Learn more about instant deposit', + 'Learn more about instant payouts', 'woocommerce-payments' ) } content={ - /* 'With instant deposit you can receive requested funds in your bank account within 30 mins for a 1.5% fee. Learn more' */ + /* 'With instant payout you can receive requested funds in your bank account within 30 mins for a 1.5% fee. Learn more' */ interpolateComponents( { mixedString: sprintf( __( - /* translators: %s: Instant deposit fee percentage */ - 'With {{strong}}instant deposit{{/strong}} you can receive requested funds in your bank account within 30 mins for a %s%% fee. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + /* translators: %s: Instant payout fee percentage */ + 'With {{strong}}instant payout{{/strong}} you can receive requested funds in your bank account within 30 mins for a %s%% fee. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), selectedOverview.instantBalance @@ -199,7 +198,7 @@ const AccountBalances: React.FC = () => { strong: , learnMoreLink: ( { } ); fireEvent.click( tooltipButton ); const tooltip = screen.getByRole( 'tooltip', { - name: /Available funds have completed processing and are ready to be deposited into your bank account./, + name: /Available funds have completed processing and are ready to be dispatched to your bank account./, } ); expect( within( tooltip ).getByRole( 'link' ) ).toHaveAttribute( 'href', - 'https://woocommerce.com/document/woopayments/deposits/deposit-schedule/' + 'https://woocommerce.com/document/woopayments/payouts/payout-schedule/' ); } ); @@ -289,11 +289,11 @@ describe( 'AccountBalances', () => { } ); fireEvent.click( tooltipButton ); const tooltip = screen.getByRole( 'tooltip', { - name: /Total balance combines both pending funds \(transactions under processing\) and available funds \(ready for deposit\)\./, + name: /Total balance combines both pending funds \(transactions under processing\) and available funds \(ready for payout\)\./, } ); expect( within( tooltip ).getByRole( 'link' ) ).toHaveAttribute( 'href', - 'https://woocommerce.com/document/woopayments/deposits/deposit-schedule/' + 'https://woocommerce.com/document/woopayments/payouts/payout-schedule/' ); } ); diff --git a/client/components/account-status/account-tools/strings.tsx b/client/components/account-status/account-tools/strings.tsx index f47e8416574..83ca0f9c1bc 100644 --- a/client/components/account-status/account-tools/strings.tsx +++ b/client/components/account-status/account-tools/strings.tsx @@ -17,7 +17,7 @@ export default { 'woocommerce-payments' ) : __( - 'Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.', + 'Payments and payouts are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.', 'woocommerce-payments' ), reset: __( 'Reset account', 'woocommerce-payments' ), diff --git a/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap b/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap index a3217d4df35..b2adb97b886 100644 --- a/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap +++ b/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap @@ -18,7 +18,7 @@ exports[`AccountTools should render in test/sandbox mode onboarding 1`] = ` Account Tools

- Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning. + Payments and payouts are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.

- Deposits: + Payouts:

- Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning. + Payments and payouts are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.

{ { interpolateComponents( { /** translators: {{strong}}: placeholders are opening and closing strong tags. {{suspendLink}}: is a link element */ mixedString: __( - 'Your deposits are {{strong}}temporarily suspended{{/strong}}. {{suspendLink}}Learn more{{/suspendLink}}', + 'Your payouts are {{strong}}temporarily suspended{{/strong}}. {{suspendLink}}Learn more{{/suspendLink}}', 'woocommerce-payments' ), components: { @@ -37,7 +37,7 @@ export const SuspendedDepositNotice: React.FC = () => { suspendLink: ( ), @@ -54,7 +54,7 @@ export const DepositIncludesLoanPayoutNotice: React.FC = () => ( { interpolateComponents( { mixedString: __( - 'This deposit will include funds from your WooCommerce Capital loan. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + 'This payout will include funds from your WooCommerce Capital loan. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), components: { @@ -86,7 +86,7 @@ export const NewAccountWaitingPeriodNotice: React.FC = () => ( > { interpolateComponents( { mixedString: __( - 'Your first deposit is held for 7-14 days. {{whyLink}}Why?{{/whyLink}}', + 'Your first payout is held for 7-14 days. {{whyLink}}Why?{{/whyLink}}', 'woocommerce-payments' ), components: { @@ -96,7 +96,7 @@ export const NewAccountWaitingPeriodNotice: React.FC = () => ( ), }, @@ -114,7 +114,7 @@ export const DepositTransitDaysNotice: React.FC = () => ( className="wcpay-deposit-transit-days-notice" > { __( - 'It may take 1-3 business days for deposits to reach your bank account.', + 'It may take 1-3 business days for payouts to reach your bank account.', 'woocommerce-payments' ) } @@ -134,7 +134,7 @@ export const NegativeBalanceDepositsPausedNotice: React.FC = () => ( mixedString: sprintf( /* translators: %s: WooPayments */ __( - 'Deposits may be interrupted while your %s balance remains negative. {{whyLink}}Why?{{/whyLink}}', + 'Payouts may be interrupted while your %s balance remains negative. {{whyLink}}Why?{{/whyLink}}', 'woocommerce-payments' ), 'WooPayments' @@ -169,7 +169,7 @@ export const DepositMinimumBalanceNotice: React.FC< { mixedString: sprintf( /* translators: %s: a formatted currency amount, e.g. $5.00 USD */ __( - 'Deposits are paused while your available funds balance remains below %s. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + 'Payouts are paused while your available funds balance remains below %s. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), minimumDepositAmountFormatted @@ -181,7 +181,7 @@ export const DepositMinimumBalanceNotice: React.FC< { ), }, @@ -197,7 +197,7 @@ export const NoFundsAvailableForDepositNotice: React.FC = () => ( { interpolateComponents( { mixedString: __( - 'You have no funds available to deposit. {{whyLink}}Why?{{/whyLink}}', + 'You have no funds available. {{whyLink}}Why?{{/whyLink}}', 'woocommerce-payments' ), components: { @@ -207,7 +207,7 @@ export const NoFundsAvailableForDepositNotice: React.FC = () => ( ), }, @@ -240,7 +240,7 @@ export const DepositFailureNotice: React.FC< { > { interpolateComponents( { mixedString: __( - 'Deposits are currently paused because a recent deposit failed. Please {{updateLink}}update your bank account details{{/updateLink}}.', + 'Payouts are currently paused because a recent payout failed. Please {{updateLink}}update your bank account details{{/updateLink}}.', 'woocommerce-payments' ), components: { diff --git a/client/components/deposits-overview/deposit-schedule.tsx b/client/components/deposits-overview/deposit-schedule.tsx index f589bf1ad12..c463dfa335f 100644 --- a/client/components/deposits-overview/deposit-schedule.tsx +++ b/client/components/deposits-overview/deposit-schedule.tsx @@ -119,7 +119,7 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( { const nextDepositHelpContent = ( <> { __( - 'Deposits are initiated based on the following criteria:', + 'Payouts are initiated based on the following criteria:', 'woocommerce-payments' ) }
@@ -173,7 +173,7 @@ exports[`Deposits Overview information Component Renders 1`] = ` data-wp-c16t="true" data-wp-component="FlexItem" > - It may take 1-3 business days for deposits to reach your bank account. + It may take 1-3 business days for payouts to reach your bank account.
- Deposit history + Payout history
January 2, 2020 @@ -310,7 +310,7 @@ exports[`Deposits Overview information Component Renders 1`] = ` January 3, 2020 @@ -358,7 +358,7 @@ exports[`Deposits Overview information Component Renders 1`] = ` January 4, 2020 @@ -392,13 +392,13 @@ exports[`Deposits Overview information Component Renders 1`] = ` class="components-button is-secondary" type="button" > - View full deposits history + View full payout history - Change deposit schedule + Change payout schedule
@@ -455,14 +455,14 @@ exports[`Suspended Deposit Notice Renders Component Renders 1`] = ` data-wp-c16t="true" data-wp-component="FlexItem" > - Your deposits are + Your payouts are temporarily suspended . Learn more diff --git a/client/components/deposits-overview/test/index.tsx b/client/components/deposits-overview/test/index.tsx index d6d5be60bdf..edaa068a100 100644 --- a/client/components/deposits-overview/test/index.tsx +++ b/client/components/deposits-overview/test/index.tsx @@ -266,8 +266,8 @@ describe( 'Deposits Overview information', () => { const { container, getByText } = render( ); // Check that the button and link is rendered. - getByText( 'View full deposits history' ); - getByText( 'Change deposit schedule' ); + getByText( 'View full payout history' ); + getByText( 'Change payout schedule' ); expect( container ).toMatchSnapshot(); } ); @@ -304,7 +304,7 @@ describe( 'Deposits Overview information', () => { setSelectedCurrency: mockSetSelectedCurrency, } ); const { getByText, queryByText } = render( ); - getByText( /Your first deposit is held for/, { + getByText( /Your first payout is held for/, { ignore: '.a11y-speak-region', } ); expect( queryByText( 'Change deposit schedule' ) ).toBeFalsy(); @@ -327,10 +327,10 @@ describe( 'Deposits Overview information', () => { const { getByText, queryByText } = render( ); - getByText( /Your deposits are temporarily suspended/ ); + getByText( /Your payouts are temporarily suspended/ ); // Check that the buttons are rendered as expected. - getByText( 'View full deposits history' ); + getByText( 'View full payout history' ); // This one is not rendered when deposits are blocked. expect( queryByText( 'Change deposit schedule' ) ).toBeFalsy(); } ); @@ -395,7 +395,7 @@ describe( 'Deposits Overview information', () => { expect( queryByText( - 'deposit will include funds from your WooCommerce Capital loan', + 'payout will include funds from your WooCommerce Capital loan', { exact: false, ignore: '.a11y-speak-region', @@ -424,7 +424,7 @@ describe( 'Deposits Overview information', () => { } ); const { queryByText } = render( ); - expect( queryByText( /Your first deposit is held for/ ) ).toBeFalsy(); + expect( queryByText( /Your first payout is held for/ ) ).toBeFalsy(); } ); test( 'Confirm new account waiting period notice shows if within waiting period', () => { @@ -442,12 +442,12 @@ describe( 'Deposits Overview information', () => { } ); const { getByText, getByRole } = render( ); - getByText( /Your first deposit is held for/, { + getByText( /Your first payout is held for/, { ignore: '.a11y-speak-region', } ); expect( getByRole( 'link', { name: /Why\?/ } ) ).toHaveAttribute( 'href', - 'https://woocommerce.com/document/woopayments/deposits/deposit-schedule/#new-accounts' + 'https://woocommerce.com/document/woopayments/payouts/payout-schedule/#new-accounts' ); } ); } ); @@ -574,7 +574,7 @@ describe( 'DepositFailureNotice Renders', () => { const { queryByText } = render( ); expect( queryByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -613,7 +613,7 @@ describe( 'DepositFailureNotice Renders', () => { const { queryByText } = render( ); expect( queryByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -652,7 +652,7 @@ describe( 'DepositFailureNotice Renders', () => { const { queryByText } = render( ); expect( queryByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -677,7 +677,7 @@ describe( 'Paused Deposit notice Renders', () => { } ); const { getByText } = render( ); - getByText( /Deposits may be interrupted/, { + getByText( /Payouts may be interrupted/, { ignore: '.a11y-speak-region', } ); } ); @@ -691,7 +691,7 @@ describe( 'Paused Deposit notice Renders', () => { mockDepositOverviews( [ accountOverview ] ); const { queryByText } = render( ); - expect( queryByText( /Deposits may be interrupted/ ) ).toBeFalsy(); + expect( queryByText( /Payouts may be interrupted/ ) ).toBeFalsy(); } ); test( 'When available balance is negative', () => { const accountOverview = createMockNewAccountOverview( @@ -703,7 +703,7 @@ describe( 'Paused Deposit notice Renders', () => { mockDepositOverviews( [ accountOverview ] ); const { queryByText } = render( ); - expect( queryByText( /Deposits may be interrupted/ ) ).toBeFalsy(); + expect( queryByText( /Payouts may be interrupted/ ) ).toBeFalsy(); } ); } ); @@ -732,7 +732,7 @@ describe( 'Minimum Deposit Amount Notice', () => { const { getByText } = render( ); getByText( - /Deposits are paused while your available funds balance remains below €5.00/, + /Payouts are paused while your available funds balance remains below €5.00/, { ignore: '.a11y-speak-region', } @@ -752,7 +752,7 @@ describe( 'Minimum Deposit Amount Notice', () => { const { queryByText } = render( ); expect( queryByText( - /Deposits are paused while your available funds balance remains below/ + /Payouts are paused while your available funds balance remains below/ ) ).toBeFalsy(); } ); diff --git a/client/components/deposits-status/index.tsx b/client/components/deposits-status/index.tsx index b5c61b2cf1c..6e562296322 100644 --- a/client/components/deposits-status/index.tsx +++ b/client/components/deposits-status/index.tsx @@ -63,7 +63,7 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => { const { iconSize } = props; const learnMoreHref = - 'https://woocommerce.com/document/woopayments/deposits/why-deposits-suspended/'; + 'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/'; const description = createInterpolateElement( /* translators: - suspended accounts FAQ URL */ diff --git a/client/components/deposits-status/test/__snapshots__/index.js.snap b/client/components/deposits-status/test/__snapshots__/index.js.snap index 9d92c7cd823..b0813fd50e2 100644 --- a/client/components/deposits-status/test/__snapshots__/index.js.snap +++ b/client/components/deposits-status/test/__snapshots__/index.js.snap @@ -20,7 +20,7 @@ exports[`DepositsStatus renders blocked status 1`] = ` Temporarily suspended ( @@ -51,7 +51,7 @@ exports[`DepositsStatus renders blocked status 2`] = ` Temporarily suspended ( @@ -174,7 +174,7 @@ exports[`DepositsStatus renders pending verification status 1`] = ` Temporarily suspended ( diff --git a/client/components/details-link/index.tsx b/client/components/details-link/index.tsx index 03226a5eb8e..0675a6f3e82 100644 --- a/client/components/details-link/index.tsx +++ b/client/components/details-link/index.tsx @@ -15,7 +15,7 @@ import { getAdminUrl } from 'wcpay/utils'; /** * The parent segment is the first part of the URL after the /payments/ path. */ -type ParentSegment = 'deposits' | 'transactions'; +type ParentSegment = 'payouts' | 'transactions'; export const getDetailsURL = ( /** diff --git a/client/components/details-link/test/__snapshots__/index.test.tsx.snap b/client/components/details-link/test/__snapshots__/index.test.tsx.snap index a2b861aebf1..6ea9065b623 100644 --- a/client/components/details-link/test/__snapshots__/index.test.tsx.snap +++ b/client/components/details-link/test/__snapshots__/index.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Details link renders dispute details with ID 1`] = `
{ test( 'renders dispute details with ID', () => { const { container: link } = render( - + ); expect( link ).toMatchSnapshot(); } ); test( 'empty render with no ID', () => { const { container: link } = render( - + ); expect( link ).toMatchSnapshot(); } ); diff --git a/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx b/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx index eaa7dcef0aa..43278a178d0 100644 --- a/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx +++ b/client/components/sandbox-mode-switch-to-live-notice/modal/index.tsx @@ -82,7 +82,7 @@ const SetupLivePaymentsModal: React.FC< Props > = ( { ) } { __( - 'We will need your banking details in order to process any deposits to you.', + 'We will need your banking details in order to process any payouts to you.', 'woocommerce-payments' ) }
diff --git a/client/components/test-mode-notice/index.tsx b/client/components/test-mode-notice/index.tsx index 6f13da9def2..7b8ac27073d 100644 --- a/client/components/test-mode-notice/index.tsx +++ b/client/components/test-mode-notice/index.tsx @@ -31,7 +31,7 @@ interface Props { const nounToUse = { documents: __( 'document', 'woocommerce-payments' ), - deposits: __( 'deposit', 'woocommerce-payments' ), + deposits: __( 'payout', 'woocommerce-payments' ), disputes: __( 'dispute', 'woocommerce-payments' ), loans: __( 'loan', 'woocommerce-payments' ), payments: __( 'order', 'woocommerce-payments' ), @@ -143,7 +143,9 @@ const getNoticeContent = ( 'Viewing test %1$s. To view live %1s, disable test mode in {{settingsLink}}%2s settings{{/settingsLink}}.', 'woocommerce-payments' ), - currentPage, + 'deposits' === currentPage + ? 'payouts' + : currentPage, 'WooPayments' ), components: { diff --git a/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap b/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap index d3f06d3f8bb..92877be2b29 100644 --- a/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap +++ b/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap @@ -22,7 +22,7 @@ exports[`Test mode notification Returns valid component for deposits page 1`] =
- Viewing test deposits. To view live deposits, disable test mode in + Viewing test payouts. To view live payouts, disable test mode in diff --git a/client/connect-account-page/strings.tsx b/client/connect-account-page/strings.tsx index 808b9c13705..95c1be5a59d 100644 --- a/client/connect-account-page/strings.tsx +++ b/client/connect-account-page/strings.tsx @@ -37,7 +37,7 @@ export default { ), paymentMethods: { deposits: { - title: __( 'Deposits', 'woocommerce-payments' ), + title: __( 'Payouts', 'woocommerce-payments' ), value: __( 'Automatic - Daily', 'woocommerce-payments' ), }, capture: { @@ -58,7 +58,7 @@ export default { 'woocommerce-payments' ), usp3: __( - 'Earn recurring revenue and get deposits into your bank account.', + 'Earn recurring revenue and get payouts into your bank account.', 'woocommerce-payments' ), sandboxMode: { @@ -111,7 +111,7 @@ export default { 'woocommerce-payments' ), }, - button: __( 'enable deposits.', 'woocommerce-payments' ), + button: __( 'enable payouts.', 'woocommerce-payments' ), }, infoModal: { title: sprintf( @@ -252,7 +252,7 @@ export default { step2: { heading: __( 'Provide a few business details', 'woocommerce-payments' ), description: __( - 'Next we’ll ask you to verify your business and payment details to enable deposits.', + 'Next we’ll ask you to verify your business and payment details to enable payouts.', 'woocommerce-payments' ), }, diff --git a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap index 256570bcc8c..3cfc2216716 100644 --- a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap +++ b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap @@ -50,7 +50,7 @@ exports[`ConnectAccountPage should render correctly 1`] = ` class="components-button is-link" type="button" > - enable deposits. + enable payouts.
@@ -133,7 +133,7 @@ exports[`ConnectAccountPage should render correctly 1`] = ` >

- Deposits + Payouts

Automatic - Daily @@ -315,7 +315,7 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = ` class="components-button is-link" type="button" > - enable deposits. + enable payouts.
@@ -398,7 +398,7 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = ` >

- Deposits + Payouts

Automatic - Daily @@ -542,7 +542,7 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = ` class="components-button is-link" type="button" > - enable deposits. + enable payouts.
@@ -625,7 +625,7 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = ` >

- Deposits + Payouts

Automatic - Daily diff --git a/client/connect-account-page/test/info-notice-modal.test.tsx b/client/connect-account-page/test/info-notice-modal.test.tsx index 0b24620aa81..207935034dc 100644 --- a/client/connect-account-page/test/info-notice-modal.test.tsx +++ b/client/connect-account-page/test/info-notice-modal.test.tsx @@ -27,7 +27,7 @@ describe( 'Connect Account Page – Info Notice Modal', () => { render( ); const enableDeposits = screen.getByRole( 'button', { - name: /enable deposits./i, + name: /enable payouts./i, } ); userEvent.click( enableDeposits ); diff --git a/client/data/deposits/actions.js b/client/data/deposits/actions.js index 60b4479ab24..d4063e3e0a8 100644 --- a/client/data/deposits/actions.js +++ b/client/data/deposits/actions.js @@ -112,7 +112,7 @@ export function* submitInstantDeposit( currency ) { yield dispatch( 'core/notices' ).createSuccessNotice( sprintf( __( - 'Instant deposit for %s in transit.', + 'Instant payout for %s in transit.', 'woocommerce-payments' ), formatCurrency( deposit.amount ) @@ -123,7 +123,7 @@ export function* submitInstantDeposit( currency ) { label: __( 'View details', 'woocommerce-payments' ), url: getAdminUrl( { page: 'wc-admin', - path: '/payments/deposits/details', + path: '/payments/payouts/details', id: deposit.id, } ), }, @@ -132,7 +132,7 @@ export function* submitInstantDeposit( currency ) { ); } catch { yield dispatch( 'core/notices' ).createErrorNotice( - __( 'Error creating instant deposit.', 'woocommerce-payments' ) + __( 'Error creating instant payout.', 'woocommerce-payments' ) ); } finally { yield dispatch( STORE_NAME ).finishResolution( 'getInstantDeposit', [ diff --git a/client/data/deposits/resolvers.js b/client/data/deposits/resolvers.js index 52961f25570..a4a0ad14e26 100644 --- a/client/data/deposits/resolvers.js +++ b/client/data/deposits/resolvers.js @@ -45,7 +45,7 @@ export function* getDeposit( id ) { yield controls.dispatch( 'core/notices', 'createErrorNotice', - __( 'Error retrieving deposit.', 'woocommerce-payments' ) + __( 'Error retrieving payout.', 'woocommerce-payments' ) ); } } @@ -64,7 +64,7 @@ export function* getAllDepositsOverviews() { 'core/notices', 'createErrorNotice', __( - "Error retrieving all deposits' overviews.", + "Error retrieving all payouts' overviews.", 'woocommerce-payments' ) ); @@ -129,7 +129,7 @@ export function* getDeposits( query ) { yield controls.dispatch( 'core/notices', 'createErrorNotice', - __( 'Error retrieving deposits.', 'woocommerce-payments' ) + __( 'Error retrieving payouts.', 'woocommerce-payments' ) ); yield updateErrorForDepositQuery( query, null, e ); } diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index f2a835676d4..2176b079377 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -40,6 +40,7 @@ import { } from 'multi-currency/interface/functions'; import { depositStatusLabels } from '../strings'; import './style.scss'; +import { PayoutsRenameNotice } from '../rename-notice'; /** * Renders the deposit status indicator UI, re-purposing the OrderStatus component from @woocommerce/components. @@ -121,9 +122,9 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { const isWithdrawal = deposit.type === 'withdrawal'; - let depositDateLabel = __( 'Deposit date', 'woocommerce-payments' ); + let depositDateLabel = __( 'Payout date', 'woocommerce-payments' ); if ( ! deposit.automatic ) { - depositDateLabel = __( 'Instant deposit date', 'woocommerce-payments' ); + depositDateLabel = __( 'Instant payout date', 'woocommerce-payments' ); } if ( isWithdrawal ) { depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' ); @@ -167,7 +168,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { 'Withdrawal overview', 'woocommerce-payments' ) - : __( 'Deposit overview', 'woocommerce-payments' ) + : __( 'Payout overview', 'woocommerce-payments' ) } > { () => [ @@ -181,7 +182,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { 'woocommerce-payments' ) : __( - 'Deposit amount', + 'Payout amount', 'woocommerce-payments' ) } @@ -214,7 +215,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { 'woocommerce-payments' ) : __( - 'Net deposit amount', + 'Net payout amount', 'woocommerce-payments' ) } @@ -246,6 +247,7 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( { return ( + { isLoading ? ( @@ -264,7 +266,7 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( { { __( - 'Deposit transactions', + 'Payout transactions', 'woocommerce-payments' ) } @@ -273,12 +275,12 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( { { interpolateComponents( { /* Translators: {{learnMoreLink}} is a link element (
). */ mixedString: __( - `We're unable to show transaction history on instant deposits. {{learnMoreLink}}Learn more{{/learnMoreLink}}`, + `We're unable to show transaction history on instant payouts. {{learnMoreLink}}Learn more{{/learnMoreLink}}`, 'woocommerce-payments' ), components: { learnMoreLink: ( - + ), }, } ) } diff --git a/client/deposits/details/test/__snapshots__/index.tsx.snap b/client/deposits/details/test/__snapshots__/index.tsx.snap index 53ef5a35d23..fecce68ae08 100644 --- a/client/deposits/details/test/__snapshots__/index.tsx.snap +++ b/client/deposits/details/test/__snapshots__/index.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Deposit overview renders automatic deposit correctly 1`] = ` +exports[`Deposit overview renders automatic payout correctly 1`] = `
- Deposit date: Jan 2, 2020 + Payout date: Jan 2, 2020
@@ -173,7 +173,7 @@ exports[`Deposit overview renders instant deposit correctly 1`] = `
- Instant deposit date: Jan 2, 2020 + Instant payout date: Jan 2, 2020
- Deposit amount + Payout amount
- Net deposit amount + Net payout amount
{ }; } ); - test( 'renders automatic deposit correctly', () => { + test( 'renders automatic payout correctly', () => { const { container: overview, getByText } = render( ); - getByText( /Deposit date:/ ); + getByText( /Payout date:/ ); getByText( 'Completed (paid)' ); expect( overview ).toMatchSnapshot(); } ); diff --git a/client/deposits/filters/config.js b/client/deposits/filters/config.js index 90d850c7f2f..ee5b198e7d5 100644 --- a/client/deposits/filters/config.js +++ b/client/deposits/filters/config.js @@ -24,7 +24,7 @@ const depositStatusOptions = Object.entries( depositStatusLabels ) export const filters = [ { - label: __( 'Deposit currency', 'woocommerce-payments' ), + label: __( 'Payout currency', 'woocommerce-payments' ), param: 'store_currency_is', staticParams: [ 'paged', @@ -62,7 +62,7 @@ export const filters = [ showFilters: () => true, filters: [ { - label: __( 'All deposits', 'woocommerce-payments' ), + label: __( 'All payouts', 'woocommerce-payments' ), value: 'all', }, { @@ -83,21 +83,18 @@ export const advancedFilters = { /** translators: A sentence describing filters for deposits. See screen shot for context: https://d.pr/i/NcGpwL */ title: wooCommerceVersion < 7.8 - ? __( - 'Deposits match {{select /}} filters', - 'woocommerce-payments' - ) - : __( 'Deposits match filters', 'woocommerce-payments' ), filters: { date: { labels: { add: __( 'Date', 'woocommerce-payments' ), remove: __( - 'Remove deposit date filter', + 'Remove payout date filter', 'woocommerce-payments' ), rule: __( - 'Select a deposit date filter match', + 'Select a payout date filter match', 'woocommerce-payments' ), /* translators: A sentence describing a deposit date filter. See screen shot for context: https://d.pr/i/NcGpwL */ @@ -111,7 +108,7 @@ export const advancedFilters = { 'Date ', 'woocommerce-payments' ), - filter: __( 'Select a deposit date', 'woocommerce-payments' ), + filter: __( 'Select a payout date', 'woocommerce-payments' ), }, rules: [ { @@ -135,11 +132,11 @@ export const advancedFilters = { labels: { add: __( 'Status', 'woocommerce-payments' ), remove: __( - 'Remove deposit status filter', + 'Remove payout status filter', 'woocommerce-payments' ), rule: __( - 'Select a deposit status filter match', + 'Select a payout status filter match', 'woocommerce-payments' ), /* translators: A sentence describing a deposit status filter. See screen shot for context: https://d.pr/i/NcGpwL */ @@ -153,20 +150,20 @@ export const advancedFilters = { 'Status ', 'woocommerce-payments' ), - filter: __( 'Select a deposit status', 'woocommerce-payments' ), + filter: __( 'Select a payout status', 'woocommerce-payments' ), }, rules: [ { value: 'is', /* translators: Sentence fragment, logical, "Is" refers to searching for deposits matching a chosen deposit status. Screenshot for context: https://d.pr/i/NcGpwL */ - label: _x( 'Is', 'deposit status', 'woocommerce-payments' ), + label: _x( 'Is', 'payout status', 'woocommerce-payments' ), }, { value: 'is_not', /* translators: Sentence fragment, logical, "Is not" refers to searching for deposits that don\'t match a chosen deposit status. Screenshot for context: https://d.pr/i/NcGpwL */ label: _x( 'Is not', - 'deposit status', + 'payout status', 'woocommerce-payments' ), }, diff --git a/client/deposits/filters/index.js b/client/deposits/filters/index.js index 0d6d57afecc..1393109a06e 100644 --- a/client/deposits/filters/index.js +++ b/client/deposits/filters/index.js @@ -38,7 +38,7 @@ export const DepositsFilters = ( props ) => { filters={ populateDepositCurrencies( filters ) } advancedFilters={ advancedFilters } showDatePicker={ false } - path="/payments/deposits" + path="/payments/payouts" query={ getQuery() } />
diff --git a/client/deposits/filters/test/index.js b/client/deposits/filters/test/index.js index 04071451934..fc00ab0bcde 100644 --- a/client/deposits/filters/test/index.js +++ b/client/deposits/filters/test/index.js @@ -34,7 +34,7 @@ describe( 'Deposits filters', () => { const { rerender } = render( ); // select advanced filter view - user.click( screen.getByRole( 'button', { name: /All deposits/i } ) ); + user.click( screen.getByRole( 'button', { name: /All payouts/i } ) ); user.click( screen.getByRole( 'button', { name: /Advanced filters/i } ) ); @@ -54,7 +54,7 @@ describe( 'Deposits filters', () => { beforeEach( () => { addAdvancedFilter( 'Date' ); ruleSelector = screen.getByRole( 'combobox', { - name: /deposit date filter/i, + name: /payout date filter/i, } ); } ); @@ -105,13 +105,13 @@ describe( 'Deposits filters', () => { beforeEach( () => { addAdvancedFilter( 'Status' ); ruleSelector = screen.getByRole( 'combobox', { - name: /deposit status filter/i, + name: /payout status filter/i, } ); } ); test( 'should render all status', () => { const statusSelect = screen.getByRole( 'combobox', { - name: /deposit status$/i, + name: /payout status$/i, } ); expect( statusSelect.options ).toMatchSnapshot(); } ); @@ -121,7 +121,7 @@ describe( 'Deposits filters', () => { // need to include $ in name, otherwise "Select a deposit status filter" is also matched. user.selectOptions( - screen.getByRole( 'combobox', { name: /deposit status$/i } ), + screen.getByRole( 'combobox', { name: /payout status$/i } ), 'paid' ); user.click( screen.getByRole( 'link', { name: /Filter/ } ) ); @@ -134,7 +134,7 @@ describe( 'Deposits filters', () => { // need to include $ in name, otherwise "Select a deposit status filter" is also matched. user.selectOptions( - screen.getByRole( 'combobox', { name: /deposit status$/i } ), + screen.getByRole( 'combobox', { name: /payout status$/i } ), 'pending' ); user.click( screen.getByRole( 'link', { name: /Filter/ } ) ); @@ -147,7 +147,7 @@ describe( 'Deposits filters', () => { // need to include $ in name, otherwise "Select a deposit status filter" is also matched. user.selectOptions( - screen.getByRole( 'combobox', { name: /deposit status$/i } ), + screen.getByRole( 'combobox', { name: /payout status$/i } ), 'in_transit' ); user.click( screen.getByRole( 'link', { name: /Filter/ } ) ); @@ -160,7 +160,7 @@ describe( 'Deposits filters', () => { // need to include $ in name, otherwise "Select a deposit status filter" is also matched. user.selectOptions( - screen.getByRole( 'combobox', { name: /deposit status$/i } ), + screen.getByRole( 'combobox', { name: /payout status$/i } ), 'canceled' ); user.click( screen.getByRole( 'link', { name: /Filter/ } ) ); @@ -173,7 +173,7 @@ describe( 'Deposits filters', () => { // need to include $ in name, otherwise "Select a deposit status filter" is also matched. user.selectOptions( - screen.getByRole( 'combobox', { name: /deposit status$/i } ), + screen.getByRole( 'combobox', { name: /payout status$/i } ), 'failed' ); user.click( screen.getByRole( 'link', { name: /Filter/ } ) ); diff --git a/client/deposits/index.tsx b/client/deposits/index.tsx index 938aa8df577..d799ff3d385 100644 --- a/client/deposits/index.tsx +++ b/client/deposits/index.tsx @@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n'; import { TestModeNotice } from 'components/test-mode-notice'; import BannerNotice from 'components/banner-notice'; import DepositSchedule from 'components/deposits-overview/deposit-schedule'; +import { PayoutsRenameNotice } from './rename-notice'; import { useAllDepositsOverviews } from 'data'; import { useSettings } from 'wcpay/data'; import DepositsList from './list'; @@ -118,7 +119,7 @@ const DepositFailureNotice: React.FC = () => { > { interpolateComponents( { mixedString: __( - 'Deposits are currently paused because a recent deposit failed. Please {{updateLink}}update your bank account details{{/updateLink}}.', + 'Payouts are currently paused because a recent payout failed. Please {{updateLink}}update your bank account details{{/updateLink}}.', 'woocommerce-payments' ), components: { @@ -149,6 +150,7 @@ const DepositsPage: React.FC = () => { return ( + diff --git a/client/deposits/instant-deposits/index.tsx b/client/deposits/instant-payouts/index.tsx similarity index 84% rename from client/deposits/instant-deposits/index.tsx rename to client/deposits/instant-payouts/index.tsx index 64c49bc069f..81ed4b54bbb 100644 --- a/client/deposits/instant-deposits/index.tsx +++ b/client/deposits/instant-payouts/index.tsx @@ -13,7 +13,7 @@ import { useState } from '@wordpress/element'; */ import './style.scss'; import { formatCurrency } from 'multi-currency/interface/functions'; -import InstantDepositModal from './modal'; +import InstantPayoutModal from './modal'; import { useInstantDeposit } from 'wcpay/data'; import type * as AccountOverview from 'wcpay/types/account-overview'; @@ -26,10 +26,10 @@ const isButtonDisabled = ( instantBalance: AccountOverview.InstantBalance ) => { return buttonDisabled; }; -interface InstantDepositButtonProps { +interface InstantPayoutButtonProps { instantBalance: AccountOverview.InstantBalance; } -const InstantDepositButton: React.FC< InstantDepositButtonProps > = ( { +const InstantPayoutButton: React.FC< InstantPayoutButtonProps > = ( { instantBalance, } ) => { const [ isModalOpen, setModalOpen ] = useState( false ); @@ -52,7 +52,7 @@ const InstantDepositButton: React.FC< InstantDepositButtonProps > = ( { > { sprintf( __( - /* translators: %s: Available instant deposit amount */ + /* translators: %s: Available instant payout amount */ 'Get %s now', 'woocommerce-payments' ), @@ -63,7 +63,7 @@ const InstantDepositButton: React.FC< InstantDepositButtonProps > = ( { ) } { ( isModalOpen || inProgress ) && ( - = ( { ); }; -export default InstantDepositButton; +export default InstantPayoutButton; diff --git a/client/deposits/instant-deposits/modal.tsx b/client/deposits/instant-payouts/modal.tsx similarity index 68% rename from client/deposits/instant-deposits/modal.tsx rename to client/deposits/instant-payouts/modal.tsx index e9d0f530aeb..ac8fdab1f0d 100644 --- a/client/deposits/instant-deposits/modal.tsx +++ b/client/deposits/instant-payouts/modal.tsx @@ -18,27 +18,27 @@ import { import type * as AccountOverview from 'wcpay/types/account-overview'; import './style.scss'; -interface InstantDepositModalProps { +interface InstantPayoutModalProps { instantBalance: AccountOverview.InstantBalance; onClose: () => void; onSubmit: () => void; inProgress: boolean; } -const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { +const InstantPayoutModal: React.FC< InstantPayoutModalProps > = ( { instantBalance: { amount, fee, net, fee_percentage: percentage }, onClose, onSubmit, inProgress, } ) => { const learnMoreHref = - 'https://woocommerce.com/document/woopayments/deposits/instant-deposits/'; + 'https://woocommerce.com/document/woopayments/payouts/instant-payouts/'; const feePercentage = `${ percentage }%`; const description = createInterpolateElement( /* translators: %s: amount representing the fee percentage,
: instant payout doc URL */ sprintf( __( - 'Need cash in a hurry? Instant deposits are available within 30 minutes for a nominal %s service fee. Learn more', + 'Need cash in a hurry? Instant payouts are available within 30 minutes for a nominal %s service fee. Learn more', 'woocommerce-payments' ), feePercentage @@ -57,20 +57,20 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { return (

{ description }

    -
  • +
  • { __( - 'Balance available for instant deposit: ', + 'Balance available for instant payout: ', 'woocommerce-payments' ) } { formatCurrency( amount ) }
  • -
  • +
  • { sprintf( /* translators: %s - amount representing the fee percentage */ __( '%s service fee: ', 'woocommerce-payments' ), @@ -78,13 +78,13 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { ) } -{ formatCurrency( fee ) }
  • -
  • - { __( 'Net deposit amount: ', 'woocommerce-payments' ) } +
  • + { __( 'Net payout amount: ', 'woocommerce-payments' ) } { formatExplicitCurrency( net ) }
-
+
@@ -95,8 +95,8 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { disabled={ inProgress } > { sprintf( - /* translators: %s: Monetary amount to deposit */ - __( 'Deposit %s now', 'woocommerce-payments' ), + /* translators: %s: Monetary amount to pay out */ + __( 'Pay out %s now', 'woocommerce-payments' ), formatExplicitCurrency( net ) ) } @@ -105,4 +105,4 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { ); }; -export default InstantDepositModal; +export default InstantPayoutModal; diff --git a/client/deposits/instant-deposits/style.scss b/client/deposits/instant-payouts/style.scss similarity index 74% rename from client/deposits/instant-deposits/style.scss rename to client/deposits/instant-payouts/style.scss index 8232fd2508b..b3c16187b5f 100644 --- a/client/deposits/instant-deposits/style.scss +++ b/client/deposits/instant-payouts/style.scss @@ -1,4 +1,4 @@ -div.wcpay-instant-deposits-modal { +div.wcpay-instant-payout-modal { max-width: 500px; p { @@ -20,17 +20,17 @@ div.wcpay-instant-deposits-modal { } } - .wcpay-instant-deposits-modal__balance { + .wcpay-instant-payout-modal__balance { padding-bottom: 0; } - .wcpay-instant-deposits-modal__fee { + .wcpay-instant-payout-modal__fee { span { color: $studio-red-50; } } - .wcpay-instant-deposits-modal__net { + .wcpay-instant-payout-modal__net { border-top: 1px solid $studio-gray-5; span { diff --git a/client/deposits/instant-deposits/test/__snapshots__/index.tsx.snap b/client/deposits/instant-payouts/test/__snapshots__/index.tsx.snap similarity index 70% rename from client/deposits/instant-deposits/test/__snapshots__/index.tsx.snap rename to client/deposits/instant-payouts/test/__snapshots__/index.tsx.snap index 2eec0aa2041..aca4e115afd 100644 --- a/client/deposits/instant-deposits/test/__snapshots__/index.tsx.snap +++ b/client/deposits/instant-payouts/test/__snapshots__/index.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Instant deposit button and modal button renders correctly with balance 1`] = ` +exports[`Instant payout button and modal button renders correctly with balance 1`] = `

- Need cash in a hurry? Instant deposits are available within 30 minutes for a nominal 1.5% service fee. + Need cash in a hurry? Instant payouts are available within 30 minutes for a nominal 1.5% service fee. @@ -66,15 +66,15 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `

  • - Balance available for instant deposit: + Balance available for instant payout: $123.45
  • 1.5% service fee: @@ -83,16 +83,16 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `
  • - Net deposit amount: + Net payout amount: $122.22
diff --git a/client/deposits/instant-deposits/test/index.tsx b/client/deposits/instant-payouts/test/index.tsx similarity index 90% rename from client/deposits/instant-deposits/test/index.tsx rename to client/deposits/instant-payouts/test/index.tsx index d8b2d8ec8e6..4af2ee92233 100644 --- a/client/deposits/instant-deposits/test/index.tsx +++ b/client/deposits/instant-payouts/test/index.tsx @@ -7,7 +7,7 @@ import { fireEvent, render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import InstantDepositButton from '../'; +import InstantDepositButton from '..'; import { useInstantDeposit } from 'wcpay/data'; import type * as AccountOverview from 'wcpay/types/account-overview'; @@ -41,7 +41,7 @@ declare const global: { }; }; -describe( 'Instant deposit button and modal', () => { +describe( 'Instant payout button and modal', () => { beforeEach( () => { jest.clearAllMocks(); global.wcpaySettings = { @@ -74,7 +74,7 @@ describe( 'Instant deposit button and modal', () => { ); expect( - screen.queryByRole( 'dialog', { name: /instant deposit/i } ) + screen.queryByRole( 'dialog', { name: /instant payout/i } ) ).not.toBeInTheDocument(); fireEvent.click( screen.getByRole( 'button', { @@ -82,7 +82,7 @@ describe( 'Instant deposit button and modal', () => { } ) ); const modal = screen.queryByRole( 'dialog', { - name: /instant deposit/i, + name: /instant payout/i, } ); expect( modal ).toBeInTheDocument(); expect( modal ).toMatchSnapshot(); diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index 7e640e16338..c991e7e7ec3 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -120,19 +120,19 @@ export const DepositsList = (): JSX.Element => { const rows = deposits.map( ( deposit ) => { const clickable = ( children: React.ReactNode ): JSX.Element => ( recordEvent( 'wcpay_deposits_row_click' ) } > { children } ); const detailsLink = ( - + ); const dateDisplay = ( recordEvent( 'wcpay_deposits_row_click' ) } > { dateI18n( @@ -186,8 +186,8 @@ export const DepositsList = (): JSX.Element => { summary = [ { label: _n( - 'deposit', - 'deposits', + 'payout', + 'payouts', depositsSummary.count, 'woocommerce-payments' ), @@ -212,7 +212,7 @@ export const DepositsList = (): JSX.Element => { depositsSummary.store_currencies || ( isCurrencyFiltered ? [ getQuery().store_currency_is ] : [] ); - const title = __( 'Deposits', 'woocommerce-payments' ); + const title = __( 'Payouts', 'woocommerce-payments' ); const downloadable = !! rows.length; @@ -317,7 +317,7 @@ export const DepositsList = (): JSX.Element => { const csvColumns = [ { ...columns[ 0 ], - label: __( 'Deposit Id', 'woocommerce-payments' ), + label: __( 'Payout Id', 'woocommerce-payments' ), }, ...columns.slice( 1 ), ]; @@ -365,7 +365,7 @@ export const DepositsList = (): JSX.Element => { - Deposit currency + Payout currency :
- All deposits + All payouts
@@ -96,7 +96,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` data-wp-c16t="true" data-wp-component="Text" > - Deposit history + Payout history
- Deposit history + Payout history @@ -321,7 +321,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` > Jan 2, 2020 @@ -354,10 +354,10 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` - Deposit + Payout $20.00 @@ -378,7 +378,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` MOCK BANK •••• 1234 (USD) @@ -408,7 +408,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` > Jan 3, 2020 @@ -441,7 +441,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` Withdrawal @@ -453,7 +453,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` $30.00 @@ -465,7 +465,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` MOCK BANK •••• 1234 (USD) @@ -495,7 +495,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` > Jan 4, 2020 @@ -528,7 +528,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` Withdrawal @@ -540,7 +540,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` $40.00 @@ -552,7 +552,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` MOCK BANK •••• 1234 (USD) @@ -599,7 +599,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` - deposit + payout
  • - Deposit currency + Payout currency :
    - All deposits + All payouts
    @@ -732,7 +732,7 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = ` data-wp-c16t="true" data-wp-component="Text" > - Deposit history + Payout history
  • diff --git a/client/deposits/list/test/index.tsx b/client/deposits/list/test/index.tsx index 322ca965f23..d70561fb6d4 100644 --- a/client/deposits/list/test/index.tsx +++ b/client/deposits/list/test/index.tsx @@ -281,7 +281,7 @@ describe( 'Deposits list', () => { getByRole( 'button', { name: 'Download' } ).click(); const expected = [ - '"Deposit Id"', + '"Payout Id"', 'Date', 'Type', 'Amount', diff --git a/client/deposits/rename-notice/header-image.svg b/client/deposits/rename-notice/header-image.svg new file mode 100644 index 00000000000..563468de2b4 --- /dev/null +++ b/client/deposits/rename-notice/header-image.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/deposits/rename-notice/index.tsx b/client/deposits/rename-notice/index.tsx new file mode 100644 index 00000000000..61ff61b142e --- /dev/null +++ b/client/deposits/rename-notice/index.tsx @@ -0,0 +1,88 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import React, { useState, useEffect } from 'react'; +import { TourKit } from '@woocommerce/components'; +import { useDispatch } from '@wordpress/data'; +import { createInterpolateElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import './style.scss'; + +export const PayoutsRenameNotice = () => { + const isPayoutsRenameNoticeDismissed = + wcpaySettings.isPayoutsRenameNoticeDismissed; + const { updateOptions } = useDispatch( 'wc/admin/options' ); + const [ showTour, setShowTour ] = useState( false ); + + const onClose = () => { + updateOptions( { + wcpay_payouts_rename_notice_dismissed: true, + } ); + setShowTour( false ); + wcpaySettings.isPayoutsRenameNoticeDismissed = true; + }; + + useEffect( () => { + if ( ! isPayoutsRenameNoticeDismissed ) { + setShowTour( true ); + } + }, [ isPayoutsRenameNoticeDismissed ] ); + + if ( ! showTour ) return null; + + return ( + Learn More.", + 'woocommerce-payments' + ), + { + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ), + }, + }, + }, + ], + closeHandler: onClose, + } } + > + ); +}; diff --git a/client/deposits/rename-notice/style.scss b/client/deposits/rename-notice/style.scss new file mode 100644 index 00000000000..3a2c51b7334 --- /dev/null +++ b/client/deposits/rename-notice/style.scss @@ -0,0 +1,77 @@ +.wc-admin-payments-overview-payouts-rename-tour { + color: #1e1e1e; + + .woocommerce-tour-kit-step { + border-radius: 8px; + border: 1px solid #dcdcdc; + + /* Shadow / Popover */ + box-shadow: 0 2px 6px 0 rgba( 0, 0, 0, 0.05 ); + width: 257px; + padding-bottom: 0; + } + + .components-card__footer { + display: none; + } + + .tour-kit-frame__container { + box-shadow: none; + background: none; + } + + .components-elevation { + display: none; + } + + .woocommerce-tour-kit-step__body { + background-image: url( './header-image.svg' ); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: 5px; + padding-bottom: 24px; + } + .woocommerce-tour-kit-step-navigation { + display: none; + } + h2 { + padding-top: 100px; + font-size: 14px; + line-height: 24px; + } + p.woocommerce-tour-kit-step__description { + font-size: 13px; + line-height: 18px; + margin-top: 8px; + } + .tour-kit-frame__arrow::before { + box-shadow: none !important; + } + + .tour-kit-frame__container[data-popper-placement^='bottom'] { + & > .tour-kit-frame__arrow { + background: #fff; + &::before { + border-top: 1px solid var( --gutenberg-gray-300, #ddd ); + border-left: 1px solid var( --gutenberg-gray-300, #ddd ); + } + } + } + + .tour-kit-frame__container[data-popper-placement^='right'] { + & > .tour-kit-frame__arrow { + background: #fff; + &::before { + border-bottom: 1px solid var( --gutenberg-gray-300, #ddd ); + border-left: 1px solid var( --gutenberg-gray-300, #ddd ); + } + } + } + + a { + display: block; + text-decoration: none; + margin-top: 12px; + padding-block: 11px; + } +} diff --git a/client/deposits/rename-notice/test/__snapshots__/index.tsx.snap b/client/deposits/rename-notice/test/__snapshots__/index.tsx.snap new file mode 100644 index 00000000000..8d2131ec55c --- /dev/null +++ b/client/deposits/rename-notice/test/__snapshots__/index.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PayoutsRenameNotice should render notice if isPayoutsRenameNoticeDismissed is false 1`] = ` +
    +
    + Tour Component +
    +
    +`; diff --git a/client/deposits/rename-notice/test/index.tsx b/client/deposits/rename-notice/test/index.tsx new file mode 100644 index 00000000000..9f9f2d0c7a8 --- /dev/null +++ b/client/deposits/rename-notice/test/index.tsx @@ -0,0 +1,49 @@ +/** @format */ +/** + * External dependencies + */ +import React from 'react'; +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { PayoutsRenameNotice } from '..'; + +jest.mock( '@wordpress/api-fetch', () => jest.fn() ); + +jest.mock( '@wordpress/data', () => ( { + useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ), +} ) ); + +jest.mock( '@woocommerce/components', () => ( { + TourKit: () =>
    Tour Component
    , +} ) ); + +declare const global: { + wcpaySettings: { + isPayoutsRenameNoticeDismissed: boolean; + }; +}; + +describe( 'PayoutsRenameNotice', () => { + afterEach( () => { + jest.clearAllMocks(); + } ); + + test( 'should render null if isPayoutsRenameNoticeDismissed is true', () => { + global.wcpaySettings = { + isPayoutsRenameNoticeDismissed: true, + }; + const { container } = render( ); + expect( container.firstChild ).toBeNull(); + } ); + + test( 'should render notice if isPayoutsRenameNoticeDismissed is false', () => { + global.wcpaySettings = { + isPayoutsRenameNoticeDismissed: false, + }; + const { container } = render( ); + expect( container ).toMatchSnapshot(); + } ); +} ); diff --git a/client/deposits/strings.ts b/client/deposits/strings.ts index 03a8c55198d..7dbf7df2dad 100644 --- a/client/deposits/strings.ts +++ b/client/deposits/strings.ts @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n'; import type { DepositStatus } from 'wcpay/types/deposits'; export const displayType = { - deposit: __( 'Deposit', 'woocommerce-payments' ), + deposit: __( 'Payout', 'woocommerce-payments' ), withdrawal: __( 'Withdrawal', 'woocommerce-payments' ), }; diff --git a/client/globals.d.ts b/client/globals.d.ts index 1d208d50f74..0d10d7de86b 100644 --- a/client/globals.d.ts +++ b/client/globals.d.ts @@ -89,6 +89,7 @@ declare global { fraudProtection: { isWelcomeTourDismissed?: boolean; }; + isPayoutsRenameNoticeDismissed: boolean; progressiveOnboarding?: { isEnabled: boolean; isComplete: boolean; diff --git a/client/index.js b/client/index.js index 11083acffac..c42dfd42788 100644 --- a/client/index.js +++ b/client/index.js @@ -97,9 +97,9 @@ addFilter( pages.push( { container: DepositsPage, - path: '/payments/deposits', + path: '/payments/payouts', wpOpenMenu: menuID, - breadcrumbs: [ rootLink, __( 'Deposits', 'woocommerce-payments' ) ], + breadcrumbs: [ rootLink, __( 'Payouts', 'woocommerce-payments' ) ], navArgs: { id: 'wc-payments-deposits', }, @@ -107,19 +107,19 @@ addFilter( } ); pages.push( { container: DepositDetailsPage, - path: '/payments/deposits/details', + path: '/payments/payouts/details', wpOpenMenu: menuID, breadcrumbs: [ rootLink, [ - '/payments/deposits', - __( 'Deposits', 'woocommerce-payments' ), + '/payments/payouts', + __( 'Payouts', 'woocommerce-payments' ), ], - __( 'Deposit details', 'woocommerce-payments' ), + __( 'Payout details', 'woocommerce-payments' ), ], navArgs: { id: 'wc-payments-deposit-details', - parentPath: '/payments/deposits', + parentPath: '/payments/payouts', }, capability: 'manage_woocommerce', } ); diff --git a/client/overview/index.js b/client/overview/index.js index f6d5afd4a72..edb215993c7 100644 --- a/client/overview/index.js +++ b/client/overview/index.js @@ -32,6 +32,7 @@ import { useDisputes, useGetSettings, useSettings } from 'data'; import SandboxModeSwitchToLiveNotice from 'wcpay/components/sandbox-mode-switch-to-live-notice'; import './style.scss'; import BannerNotice from 'wcpay/components/banner-notice'; +import { PayoutsRenameNotice } from 'wcpay/deposits/rename-notice'; const OverviewPageError = () => { const queryParams = getQuery(); @@ -194,6 +195,7 @@ const OverviewPage = () => { { showConnectionSuccess && } { ! accountRejected && ! accountUnderReview && ( + { showTaskList && ( diff --git a/client/overview/modal/progressive-onboarding-eligibility/index.tsx b/client/overview/modal/progressive-onboarding-eligibility/index.tsx index 564e8494a70..d4b3f79021f 100644 --- a/client/overview/modal/progressive-onboarding-eligibility/index.tsx +++ b/client/overview/modal/progressive-onboarding-eligibility/index.tsx @@ -82,7 +82,7 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {

    { __( - 'Start selling now and fast track the setup process, or continue the process to set up deposits with WooPayments.', + 'Start selling now and fast track the setup process, or continue the process to set up payouts with WooPayments.', 'woocommerce-payments' ) }

    @@ -120,14 +120,14 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => { { __( 'Flexible process', 'woocommerce-payments' ) } { __( - 'You have a $5,000 balance limit or 30 days from your first transaction to verify and set up deposits in your account.', + 'You have a $5,000 balance limit or 30 days from your first transaction to verify and set up payouts in your account.', 'woocommerce-payments' ) }
    @@ -1441,7 +1441,7 @@ exports[`PaymentDetailsTimeline renders subscription fee correctly 1`] = ` - $0.66 will be added to a future deposit. + $0.66 will be added to a future payout.
    - Net deposit: $0.66 + Net payout: $0.66
    diff --git a/client/payment-details/timeline/test/__snapshots__/map-events.js.snap b/client/payment-details/timeline/test/__snapshots__/map-events.js.snap index 3d0a3862088..e9c43d19b15 100644 --- a/client/payment-details/timeline/test/__snapshots__/map-events.js.snap +++ b/client/payment-details/timeline/test/__snapshots__/map-events.js.snap @@ -14,9 +14,9 @@ exports[`mapTimelineEvents Multi-Currency events formats captured events with fe "headline": $20.97 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -27,7 +27,7 @@ exports[`mapTimelineEvents Multi-Currency events formats captured events with fe "1.00 EUR → 1.19944 USD: $21.59 USD", "Fee (2.9% + $0.30): -$0.62", undefined, - "Net deposit: $20.97 USD", + "Net payout: $20.97 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of €18.00 EUR was successfully charged.", @@ -52,9 +52,9 @@ exports[`mapTimelineEvents Multi-Currency events formats captured events without "headline": $20.97 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -65,7 +65,7 @@ exports[`mapTimelineEvents Multi-Currency events formats captured events without "1.00 EUR → 1.19944 USD: $21.59 USD", "Fee: €0.52", undefined, - "Net deposit: $20.97 USD", + "Net payout: $20.97 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of €18.00 EUR was successfully charged.", @@ -91,7 +91,7 @@ exports[`mapTimelineEvents Multi-Currency events formats dispute_needs_response "Fee: $15.00", ], "date": 2020-04-02T02:06:14.000Z, - "headline": "$36.60 USD will be deducted from a future deposit.", + "headline": "$36.60 USD will be deducted from a future payout.", "icon": , }, { @@ -122,9 +122,9 @@ exports[`mapTimelineEvents Multi-Currency events formats dispute_won events 1`] "headline": $44.99 USD was added to your - Apr 5, 2020 deposit + Apr 5, 2020 payout . , @@ -152,7 +152,7 @@ exports[`mapTimelineEvents Multi-Currency events formats full_refund events 1`] { "body": [], "date": 2020-04-04T13:51:06.000Z, - "headline": "21,64 $ USD will be deducted from a future deposit.", + "headline": "21,64 $ USD will be deducted from a future payout.", "icon": , }, { @@ -180,7 +180,7 @@ exports[`mapTimelineEvents Multi-Currency events formats partial_refund events 1 { "body": [], "date": 2020-04-03T18:58:01.000Z, - "headline": "6,00 $ USD will be deducted from a future deposit.", + "headline": "6,00 $ USD will be deducted from a future payout.", "icon": , }, { @@ -374,9 +374,9 @@ exports[`mapTimelineEvents single currency events formats captured events with f "headline": $59.50 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -414,7 +414,7 @@ exports[`mapTimelineEvents single currency events formats captured events with f , - "Net deposit: $59.50 USD", + "Net payout: $59.50 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of $63.00 USD was successfully charged.", @@ -439,9 +439,9 @@ exports[`mapTimelineEvents single currency events formats captured events with j "headline": $59.50 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -452,7 +452,7 @@ exports[`mapTimelineEvents single currency events formats captured events with j undefined, "Base fee (1.95% + $0.15): -$3.50", undefined, - "Net deposit: $59.50 USD", + "Net payout: $59.50 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of $63.00 USD was successfully charged.", @@ -477,9 +477,9 @@ exports[`mapTimelineEvents single currency events formats captured events withou "headline": $59.50 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -490,7 +490,7 @@ exports[`mapTimelineEvents single currency events formats captured events withou undefined, "Fee: $3.50", undefined, - "Net deposit: $59.50 USD", + "Net payout: $59.50 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of $63.00 USD was successfully charged.", @@ -535,7 +535,7 @@ exports[`mapTimelineEvents single currency events formats dispute_needs_response "Fee: $15.00", ], "date": 2020-04-02T02:06:14.000Z, - "headline": "$110.00 USD will be deducted from a future deposit.", + "headline": "$110.00 USD will be deducted from a future payout.", "icon": , }, { @@ -566,9 +566,9 @@ exports[`mapTimelineEvents single currency events formats dispute_won events 1`] "headline": $115.00 USD was added to your - Apr 5, 2020 deposit + Apr 5, 2020 payout . , @@ -599,7 +599,7 @@ exports[`mapTimelineEvents single currency events formats financing paydown even , ], "date": 2022-02-01T12:04:04.000Z, - "headline": "$110.00 will be subtracted from a future deposit.", + "headline": "$110.00 will be subtracted from a future payout.", "icon": , }, ] @@ -616,7 +616,7 @@ exports[`mapTimelineEvents single currency events formats full_refund events 1`] { "body": [], "date": 2020-04-04T13:51:06.000Z, - "headline": "$100.00 USD will be deducted from a future deposit.", + "headline": "$100.00 USD will be deducted from a future payout.", "icon": , }, { @@ -644,7 +644,7 @@ exports[`mapTimelineEvents single currency events formats partial_refund events { "body": [], "date": 2020-04-03T18:58:01.000Z, - "headline": "$50.00 USD will be deducted from a future deposit.", + "headline": "$50.00 USD will be deducted from a future payout.", "icon": , }, { @@ -675,9 +675,9 @@ exports[`mapTimelineEvents single currency events in person payments - tap to pa "headline": $19.19 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -699,7 +699,7 @@ exports[`mapTimelineEvents single currency events in person payments - tap to pa , - "Net deposit: $19.19 USD", + "Net payout: $19.19 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of $19.80 USD was successfully charged.", @@ -724,9 +724,9 @@ exports[`mapTimelineEvents single currency events should not render fee breakup "headline": $59.50 USD was added to your - Apr 2, 2020 deposit + Apr 2, 2020 payout . , @@ -737,7 +737,7 @@ exports[`mapTimelineEvents single currency events should not render fee breakup undefined, "Fee (1.95% + $0.15): -$3.50", undefined, - "Net deposit: $59.50 USD", + "Net payout: $59.50 USD", ], "date": 2020-04-01T14:37:54.000Z, "headline": "A payment of $63.00 USD was successfully charged.", diff --git a/client/settings/deposits/index.js b/client/settings/deposits/index.js index 05c114f79fd..19ad1956419 100644 --- a/client/settings/deposits/index.js +++ b/client/settings/deposits/index.js @@ -131,17 +131,17 @@ const CustomizeDepositSchedule = () => {

    { depositScheduleInterval === 'monthly' && __( - 'Deposits scheduled on a weekend will be sent on the next business day.', + 'Payouts scheduled on a weekend will be sent on the next business day.', 'woocommerce-payments' ) } { depositScheduleInterval === 'weekly' && __( - 'Deposits that fall on a holiday will initiate on the next business day.', + 'Payouts that fall on a holiday will initiate on the next business day.', 'woocommerce-payments' ) } { depositScheduleInterval === 'daily' && __( - 'Deposits will occur every business day.', + 'Payouts will occur every business day.', 'woocommerce-payments' ) }

    @@ -161,14 +161,14 @@ const DepositsSchedule = () => { { interpolateComponents( { mixedString: __( - 'Deposit scheduling is currently unavailable for your store. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + 'Payout scheduling is currently unavailable for your store. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), components: { learnMoreLink: ( // eslint-disable-next-line jsx-a11y/anchor-has-content @@ -183,15 +183,15 @@ const DepositsSchedule = () => { { interpolateComponents( { mixedString: __( - 'Your first deposit will be held for 7-14 days. ' + - 'Deposit scheduling will be available after this period. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + 'Your first payout will be held for 7-14 days. ' + + 'Payout scheduling will be available after this period. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), components: { learnMoreLink: ( // eslint-disable-next-line jsx-a11y/anchor-has-content @@ -220,13 +220,13 @@ const Deposits = () => { return ( -

    { __( 'Deposit schedule', 'woocommerce-payments' ) }

    +

    { __( 'Payout schedule', 'woocommerce-payments' ) }

    - { __( 'Deposit bank account', 'woocommerce-payments' ) } + { __( 'Payout bank account', 'woocommerce-payments' ) }

    { hasErroredExternalAccount ? ( { ) : (

    { __( - 'Manage and update your deposit account information to receive payments and deposits.', + 'Manage and update your bank account information to receive payouts.', 'woocommerce-payments' ) }{ ' ' } { accountLink && ( diff --git a/client/settings/deposits/test/index.test.js b/client/settings/deposits/test/index.test.js index 1bd3bb9d101..f562bceee31 100644 --- a/client/settings/deposits/test/index.test.js +++ b/client/settings/deposits/test/index.test.js @@ -108,7 +108,7 @@ describe( 'Deposits', () => { ); const depositsMessage = screen.getByText( - /Deposit scheduling is currently unavailable for your store/, + /Payout scheduling is currently unavailable for your store/, { ignore: '.a11y-speak-region', } @@ -128,7 +128,7 @@ describe( 'Deposits', () => { ); const depositsMessage = screen.getByText( - /Deposit scheduling is currently unavailable for your store/, + /Payout scheduling is currently unavailable for your store/, { ignore: '.a11y-speak-region', } @@ -146,7 +146,7 @@ describe( 'Deposits', () => { ); const depositsMessage = screen.getByText( - /Deposit scheduling is currently unavailable for your store/, + /Payout scheduling is currently unavailable for your store/, { ignore: '.a11y-speak-region', } @@ -165,7 +165,7 @@ describe( 'Deposits', () => { ); const depositsMessage = screen.getByText( - /Your first deposit will be held for/, + /Your first payout will be held for/, { ignore: '.a11y-speak-region', } @@ -184,7 +184,7 @@ describe( 'Deposits', () => { ); expect( - screen.queryByText( /Your first deposit will be held for/, { + screen.queryByText( /Your first payout will be held for/, { ignore: '.a11y-speak-region', } ) ).toBeFalsy(); @@ -285,7 +285,7 @@ describe( 'Deposits', () => { ); const depositsMessage = screen.getByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -294,7 +294,7 @@ describe( 'Deposits', () => { expect( screen.queryByText( - /Manage and update your deposit account information to receive payments and deposits./, + /Manage and update your bank account information to receive payouts./, { ignore: '.a11y-speak-region', } @@ -311,7 +311,7 @@ describe( 'Deposits', () => { expect( screen.queryByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -319,7 +319,7 @@ describe( 'Deposits', () => { ).toBeFalsy(); const depositsMessage = screen.getByText( - /Manage and update your deposit account information to receive payments and deposits./, + /Manage and update your bank account information to receive payouts./, { ignore: '.a11y-speak-region', } @@ -352,7 +352,7 @@ describe( 'Deposits', () => { ); const depositsMessage = screen.getByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -361,7 +361,7 @@ describe( 'Deposits', () => { expect( screen.queryByText( - /Manage and update your deposit account information to receive payments and deposits./, + /Manage and update your bank account information to receive payouts./, { ignore: '.a11y-speak-region', } @@ -395,7 +395,7 @@ describe( 'Deposits', () => { expect( screen.queryByText( - /Deposits are currently paused because a recent deposit failed./, + /Payouts are currently paused because a recent payout failed./, { ignore: '.a11y-speak-region', } @@ -403,7 +403,7 @@ describe( 'Deposits', () => { ).toBeFalsy(); const depositsMessage = screen.getByText( - /Manage and update your deposit account information to receive payments and deposits./, + /Manage and update your bank account information to receive payouts./, { ignore: '.a11y-speak-region', } diff --git a/client/settings/settings-manager/index.js b/client/settings/settings-manager/index.js index 2668afa04c5..fc238c706b2 100644 --- a/client/settings/settings-manager/index.js +++ b/client/settings/settings-manager/index.js @@ -84,17 +84,17 @@ const DepositsDescription = () => { return ( <> -

    { __( 'Deposits', 'woocommerce-payments' ) }

    +

    { __( 'Payouts', 'woocommerce-payments' ) }

    { sprintf( __( - 'Funds are available for deposit %s business days after they’re received.', + 'Funds are available for payout %s business days after they’re received.', 'woocommerce-payments' ), depositDelayDays ) }

    - + { __( 'Learn more about pending schedules', 'woocommerce-payments' @@ -242,7 +242,7 @@ const SettingsManager = () => { -
    +