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.

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

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

Conversation

haszari
Copy link
Contributor

@haszari haszari commented Oct 15, 2024

Fixes #9542

  • Use "payout" in modal and button UI
  • Update code comments
  • Update component and type names
  • Update CSS classes and relevant CSS rules
  • Ensure existing automated tests pass
to do

Work in progress this is close but untested. My local dev site is not currently eligible for instant payouts. Update: @nagpai has tested full flow, so I think we're good to go here.

  • Test all affected UI, make sure new wording works in context and nothing missed.
  • Ensure automated tests pass, and are testing the right things.

Changes proposed

  • Update all instant-deposit related code and UI to use "payout" wording.
  • This PR aims to update everything that can be safely updated – excludes things like:
    • Documentation links / URLs
    • Database
    • API
    • custom hooks / wp.data

Testing instructions

your store needs to be eligible for instant deposits
how to test this PR
  • Ensure your store is eligible for instant deposits and has funds to deposit.
  • Go to Payments > Overview.
  • Instant payout button Get $12 now should appear on balances card.
  • Click it and follow through the modal.
  • Pay close attention and ensure there is no mention of deposit and all UI & copy is accurate and helpful 🌞

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

- Use "payout" in modal and button UI
- Update code comments
- Update component and type names
- Update CSS classes and relevant CSS rules
@haszari haszari self-assigned this Oct 15, 2024
@botwoo
Copy link
Collaborator

botwoo commented Oct 15, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9554 or branch name fix/9542-rename-payouts-instant-depost-modal-flow in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 0c374be
  • Build time: 2024-10-17 06:43:56 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Oct 15, 2024

Size Change: +16 B (0%)

Total Size: 1.33 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 39.3 kB +3 B (0%)
release/woocommerce-payments/dist/index.css 39.2 kB +3 B (0%)
release/woocommerce-payments/dist/index.js 302 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.64 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.64 kB
release/woocommerce-payments/dist/blocks-checkout.js 67.1 kB
release/woocommerce-payments/dist/cart-block.js 16.7 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.15 kB
release/woocommerce-payments/dist/checkout.css 1.15 kB
release/woocommerce-payments/dist/checkout.js 32.8 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 230 B
release/woocommerce-payments/dist/express-checkout.css 230 B
release/woocommerce-payments/dist/express-checkout.js 14.7 kB
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.6 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55.6 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 39.3 kB
release/woocommerce-payments/dist/payment-request-rtl.css 230 B
release/woocommerce-payments/dist/payment-request.css 230 B
release/woocommerce-payments/dist/payment-request.js 14.1 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 11.9 kB
release/woocommerce-payments/dist/settings-rtl.css 11.6 kB
release/woocommerce-payments/dist/settings.css 11.5 kB
release/woocommerce-payments/dist/settings.js 225 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.9 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-express-button.js 24.5 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.52 kB
release/woocommerce-payments/dist/woopay.css 4.49 kB
release/woocommerce-payments/dist/woopay.js 71.6 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 735 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js 553 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.2 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 621 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

@haszari
Copy link
Contributor Author

haszari commented Oct 15, 2024

Moving this to Needs review since it's ready for review/testing.

Noting that I have still not tested manually, but I believe the automated tests should be all good now.

As with all rename payouts changes, we'll need to decide how we merge/deploy these, until then this is blocked/should not merge.

@haszari haszari added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Oct 15, 2024
@haszari haszari requested a review from a team October 15, 2024 02:54
@nagpai
Copy link
Contributor

nagpai commented Oct 15, 2024

Manual test

  • Modal appears as expected. The button and modal text is updated as expected ✅

image

Copy link
Contributor

@nagpai nagpai left a comment

Choose a reason for hiding this comment

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

I did a manual test and a round of review at the current stage. The changes seem to work fine. I have a small nitpick about copy on the button. Else the renaming seems to be done correctly across the button and modal copy, component names and style names too.

/* 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

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!

@nagpai nagpai requested a review from a team October 15, 2024 17:51
@haszari
Copy link
Contributor Author

haszari commented Oct 15, 2024

I did a manual test and a round of review at the current stage.

Thanks for testing @nagpai – did you test full instant deposit flow? If not, let me know gaps so I can retest. Otherwise we could be good to go 🎉

@nagpai
Copy link
Contributor

nagpai commented Oct 16, 2024

Thanks for testing @nagpai – did you test full instant deposit flow? If not, let me know gaps so I can retest.

I just tested the complete flow and found that we have this transient notice that would need to be updated too. I think this would be covered within Other instant deposits promotion/notices mentioned in our tracking spreadsheet.

image

Everything else looks fine!

@haszari
Copy link
Contributor Author

haszari commented Oct 16, 2024

Thanks @nagpai ! Based on your testing I think we're good to go here, so removing in progress label.

@shendy-a8c shendy-a8c changed the base branch from develop to feature/deposits-payouts-rename October 17, 2024 06:39
@shendy-a8c shendy-a8c removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Oct 21, 2024
@shendy-a8c
Copy link
Contributor

I removed the status: blocked label as I assume it was added before the base branch was set to the feature branch.

Let me know if it's blocked from something else.

@haszari
Copy link
Contributor Author

haszari commented Oct 21, 2024

@shendy-a8c (or anyone) feel free to merge this (into feature branch) on my behalf! Otherwise I can merge tomorrow morning 🚀

@haszari
Copy link
Contributor Author

haszari commented Oct 21, 2024

I just tested the complete flow and found that we have this transient notice that would need to be updated too. I think this would be covered within Other instant deposits promotion/notices mentioned in our tracking spreadsheet.

Good spotting @nagpai , I added that info to the relevant issue:

@haszari
Copy link
Contributor Author

haszari commented Oct 21, 2024

Merging!

@haszari haszari merged commit 28124ca into feature/deposits-payouts-rename Oct 21, 2024
25 checks passed
@haszari haszari deleted the fix/9542-rename-payouts-instant-depost-modal-flow branch October 21, 2024 21:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Rename "deposit" ⇒ "payout" in instant deposit flow
5 participants