Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

rename "deposit" to "payout": instant deposit button & modal #9554

Merged
merged 9 commits into from
Oct 21, 2024
Merged

rename "deposit" to "payout": instant deposit button & modal #9554

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0c921a5
rename "deposit" to "payout": instant deposit button & modal:
Oct 15, 2024
55cfc3d
rename code folder client/deposits/instant-payouts
Oct 15, 2024
f5516aa
changelog
Oct 15, 2024
46c3025
rename payouts in instant payout related test code
Oct 15, 2024
2474b08
fix instant payout component tests snapshot
Oct 15, 2024
673b501
update changed js test snapshot for instant payout UI
Oct 15, 2024
5f0f370
Merge branch 'develop' into fix/9542-rename-payouts-instant-depost-mo…
Oct 15, 2024
85d00e2
Merge branch 'develop' into fix/9542-rename-payouts-instant-depost-mo…
Oct 15, 2024
0c374be
Merge branch 'develop' into fix/9542-rename-payouts-instant-depost-mo…
shendy-a8c Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/fix-9542-rename-payouts-instant-depost-modal-flow
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: fix

Part of a larger change - renaming deposit to payout; this PR fixes instant payout modal + button
4 changes: 2 additions & 2 deletions client/components/account-balances/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -170,7 +170,7 @@ const AccountBalances: React.FC = () => {
) }

<Flex justify="flex-start">
<InstantDepositButton
<InstantPayoutButton
instantBalance={
selectedOverview.instantBalance
}
Expand Down
12 changes: 6 additions & 6 deletions client/deposits/instant-deposits/index.tsx → client/deposits/instant-payouts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
*/
import './style.scss';
import { formatCurrency } from 'wcpay/utils/currency';
import InstantDepositModal from './modal';
import InstantPayoutModal from './modal';
import { useInstantDeposit } from 'wcpay/data';
import type * as AccountOverview from 'wcpay/types/account-overview';

Expand All @@ -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 );
Expand All @@ -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'
),
Expand All @@ -63,7 +63,7 @@ const InstantDepositButton: React.FC< InstantDepositButtonProps > = ( {
) }
</Button>
{ ( isModalOpen || inProgress ) && (
<InstantDepositModal
<InstantPayoutModal
instantBalance={ instantBalance }
inProgress={ inProgress }
onSubmit={ onSubmit }
Expand All @@ -74,4 +74,4 @@ const InstantDepositButton: React.FC< InstantDepositButtonProps > = ( {
);
};

export default InstantDepositButton;
export default InstantPayoutButton;
28 changes: 14 additions & 14 deletions client/deposits/instant-deposits/modal.tsx → client/deposits/instant-payouts/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -35,7 +35,7 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( {
/* translators: %s: amount representing the fee percentage, <a>: instant payout doc URL */
sprintf(
__(
'Need cash in a hurry? Instant deposits are available within 30 minutes for a nominal %s service fee. <a>Learn more</a>',
'Need cash in a hurry? Instant payouts are available within 30 minutes for a nominal %s service fee. <a>Learn more</a>',
'woocommerce-payments'
),
feePercentage
Expand All @@ -54,34 +54,34 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( {

return (
<Modal
title={ __( 'Instant deposit', 'woocommerce-payments' ) }
title={ __( 'Instant payout', 'woocommerce-payments' ) }
onRequestClose={ onClose }
className="wcpay-instant-deposits-modal"
className="wcpay-instant-payout-modal"
>
<p>{ description }</p>
<ul>
<li className="wcpay-instant-deposits-modal__balance">
<li className="wcpay-instant-payout-modal__balance">
{ __(
'Balance available for instant deposit: ',
'Balance available for instant payout: ',
'woocommerce-payments'
) }
<span>{ formatCurrency( amount ) }</span>
</li>
<li className="wcpay-instant-deposits-modal__fee">
<li className="wcpay-instant-payout-modal__fee">
{ sprintf(
/* translators: %s - amount representing the fee percentage */
__( '%s service fee: ', 'woocommerce-payments' ),
feePercentage
) }
<span>-{ formatCurrency( fee ) }</span>
</li>
<li className="wcpay-instant-deposits-modal__net">
{ __( 'Net deposit amount: ', 'woocommerce-payments' ) }
<li className="wcpay-instant-payout-modal__net">
{ __( 'Net payout amount: ', 'woocommerce-payments' ) }
<span>{ formatExplicitCurrency( net ) }</span>
</li>
</ul>

<div className="wcpay-instant-deposits-modal__footer">
<div className="wcpay-instant-payout-modal__footer">
<Button isSecondary onClick={ onClose }>
{ __( 'Cancel', 'woocommerce-payments' ) }
</Button>
Expand All @@ -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' ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pay out xxx now can confuse a merchant. To them it may seem that they need to pay out, wherease they are actually going to receive the amount. The copy on the button on the main overview page reads as Get xxx now. That sounds more unambiguous. What about using that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't want to change this without consulting design first – this flow was designed this way. Previously it used deposit, so pay out (or maybe payout) IMO is consistent and clear. We're using payout to mean "merchant gets money" consistently in the UI, so I would hope that they aren't confused about the meaning here!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rogermattic are you ok with the instant payout modal button saying Pay out $nnn now? Let us know (in team slack channel) if you want to test this in context, i.e. walk through the flow.

Screenshot 2024-10-16 at 11 17 40 AM

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the ping!

are you ok with the instant payout modal button saying Pay out $nnn now?

I think it sounds right!

formatExplicitCurrency( net )
) }
</Button>
Expand All @@ -102,4 +102,4 @@ const InstantDepositModal: React.FC< InstantDepositModalProps > = ( {
);
};

export default InstantDepositModal;
export default InstantPayoutModal;
8 changes: 4 additions & 4 deletions client/deposits/instant-deposits/style.scss → client/deposits/instant-payouts/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
div.wcpay-instant-deposits-modal {
div.wcpay-instant-payout-modal {
max-width: 500px;

p {
Expand All @@ -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 {
Expand Down
24 changes: 12 additions & 12 deletions ...eposits/test/__snapshots__/index.tsx.snap → ...payouts/test/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`] = `
<div>
<button
class="components-button is-primary"
Expand All @@ -11,10 +11,10 @@ exports[`Instant deposit button and modal button renders correctly with balance
</div>
`;

exports[`Instant deposit button and modal modal renders correctly 1`] = `
exports[`Instant payout button and modal modal renders correctly 1`] = `
<div
aria-labelledby="components-modal-header-0"
class="components-modal__frame wcpay-instant-deposits-modal"
class="components-modal__frame wcpay-instant-payout-modal"
role="dialog"
tabindex="-1"
>
Expand All @@ -32,7 +32,7 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `
class="components-modal__header-heading"
id="components-modal-header-0"
>
Instant deposit
Instant payout
</h1>
</div>
<button
Expand All @@ -55,7 +55,7 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `
</button>
</div>
<p>
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.
<a
href="https://woocommerce.com/document/woopayments/deposits/instant-deposits/"
rel="noopener noreferrer"
Expand All @@ -66,15 +66,15 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `
</p>
<ul>
<li
class="wcpay-instant-deposits-modal__balance"
class="wcpay-instant-payout-modal__balance"
>
Balance available for instant deposit:
Balance available for instant payout:
<span>
$123.45
</span>
</li>
<li
class="wcpay-instant-deposits-modal__fee"
class="wcpay-instant-payout-modal__fee"
>
1.5% service fee:
<span>
Expand All @@ -83,16 +83,16 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `
</span>
</li>
<li
class="wcpay-instant-deposits-modal__net"
class="wcpay-instant-payout-modal__net"
>
Net deposit amount:
Net payout amount:
<span>
$122.22
</span>
</li>
</ul>
<div
class="wcpay-instant-deposits-modal__footer"
class="wcpay-instant-payout-modal__footer"
>
<button
class="components-button is-secondary"
Expand All @@ -104,7 +104,7 @@ exports[`Instant deposit button and modal modal renders correctly 1`] = `
class="components-button is-primary"
type="button"
>
Deposit $122.22 now
Pay out $122.22 now
</button>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions .../deposits/instant-deposits/test/index.tsx → ...t/deposits/instant-payouts/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -41,7 +41,7 @@ declare const global: {
};
};

describe( 'Instant deposit button and modal', () => {
describe( 'Instant payout button and modal', () => {
beforeEach( () => {
jest.clearAllMocks();
global.wcpaySettings = {
Expand Down Expand Up @@ -74,15 +74,15 @@ describe( 'Instant deposit button and modal', () => {
<InstantDepositButton instantBalance={ mockInstantBalance } />
);
expect(
screen.queryByRole( 'dialog', { name: /instant deposit/i } )
screen.queryByRole( 'dialog', { name: /instant payout/i } )
).not.toBeInTheDocument();
fireEvent.click(
screen.getByRole( 'button', {
name: /Get \$123\.45 now/i,
} )
);
const modal = screen.queryByRole( 'dialog', {
name: /instant deposit/i,
name: /instant payout/i,
} );
expect( modal ).toBeInTheDocument();
expect( modal ).toMatchSnapshot();
Expand Down
Loading