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..6a244c6767a --- /dev/null +++ b/changelog/fix-9542-rename-payouts-instant-depost-modal-flow @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Part of a larger change - renaming deposit to payout; this PR fixes instant payout modal + button diff --git a/client/components/account-balances/index.tsx b/client/components/account-balances/index.tsx index 2a1ace68487..89174ddc9fe 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, @@ -170,7 +170,7 @@ const AccountBalances: React.FC = () => { ) } - { 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 71% rename from client/deposits/instant-deposits/modal.tsx rename to client/deposits/instant-payouts/modal.tsx index 25b2783a348..fa453ee6676 100644 --- a/client/deposits/instant-deposits/modal.tsx +++ b/client/deposits/instant-payouts/modal.tsx @@ -15,14 +15,14 @@ import { formatCurrency, formatExplicitCurrency } from 'utils/currency'; 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, @@ -35,7 +35,7 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { /* 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 @@ -54,20 +54,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' ), @@ -75,13 +75,13 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( { ) } -{ formatCurrency( fee ) }
    • -
  • - { __( 'Net deposit amount: ', 'woocommerce-payments' ) } +
  • + { __( 'Net payout amount: ', 'woocommerce-payments' ) } { formatExplicitCurrency( net ) }
-
+
@@ -92,8 +92,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 ) ) } @@ -102,4 +102,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 74% rename from client/deposits/instant-deposits/test/__snapshots__/index.tsx.snap rename to client/deposits/instant-payouts/test/__snapshots__/index.tsx.snap index 2eec0aa2041..632cd8c6f23 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.

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();