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

feat: GooglePay live account test mode notice #10429

Merged

Conversation

frosso
Copy link
Contributor

@frosso frosso commented Feb 24, 2025

Fixes: #10430
Related to #4083
Asked here: paJDYF-gMH-p2

Changes proposed in this Pull Request

Adding a notice to GooglePay/ApplePay when:

  • Test mode is active
  • The account status is "live"
  • The GooglePay/ApplePay buttons are enabled

I needed to make a few changes to the types of the WCPaySettingsContext provider. So I fixed a few areas here and there.

I renamed some problematic tests from tsx to js, given the discussion here: paJDYF-f5D-p2

Testing instructions

You'll need a live account for this.
As an alternative, you can just "mock" a "live account" by changing this line to return true: https://github.com/Automattic/woocommerce-payments/blob/feat/google-play-test-mode-live-account-compatibility-notice/includes/class-wc-payments-account.php#L354

  • Navigate to the WooPayments settings page
  • There should be a notice displayed under the GooglePay/ApplePay buttons
  • The notice should appear if all these conditions are met:
    • The account is "live"
    • The ApplePay/GooglePay buttons are enabled
    • The "test mode" is active
Screenshot 2025-02-24 at 1 03 50 PM Screenshot 2025-02-24 at 1 03 42 PM
  • If any of the conditions above are not met, the notice should be hidden
Screenshot 2025-02-24 at 1 06 04 PM Screenshot 2025-02-24 at 1 05 56 PM
  • 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

@botwoo
Copy link
Collaborator

botwoo commented Feb 24, 2025

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 10429 or branch name feat/google-play-test-mode-live-account-compatibility-notice 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: e43e488
  • Build time: 2025-02-27 18:50:19 UTC

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

Copy link
Contributor

github-actions bot commented Feb 24, 2025

Size Change: -256 B (0%)

Total Size: 1.29 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 234 kB -58 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 61.1 kB -54 B (0%)
release/woocommerce-payments/dist/multi-currency.js 59.1 kB -65 B (0%)
release/woocommerce-payments/dist/order.js 42.5 kB -62 B (0%)
release/woocommerce-payments/dist/payment-gateways.js 40.1 kB -62 B (0%)
release/woocommerce-payments/dist/settings.js 224 kB +45 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.4 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.4 kB
release/woocommerce-payments/assets/css/success.css 189 B
release/woocommerce-payments/assets/css/success.rtl.css 190 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.67 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.67 kB
release/woocommerce-payments/dist/blocks-checkout.js 55.5 kB
release/woocommerce-payments/dist/cart-block.js 17.3 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.28 kB
release/woocommerce-payments/dist/checkout.css 1.28 kB
release/woocommerce-payments/dist/checkout.js 34.6 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 236 B
release/woocommerce-payments/dist/express-checkout.css 236 B
release/woocommerce-payments/dist/express-checkout.js 15.8 kB
release/woocommerce-payments/dist/frontend-tracks.js 854 B
release/woocommerce-payments/dist/index-rtl.css 35.5 kB
release/woocommerce-payments/dist/index.css 35.6 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 4.29 kB
release/woocommerce-payments/dist/multi-currency.css 4.29 kB
release/woocommerce-payments/dist/order-rtl.css 740 B
release/woocommerce-payments/dist/order.css 740 B
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.34 kB
release/woocommerce-payments/dist/payment-gateways.css 1.34 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 12.6 kB
release/woocommerce-payments/dist/settings-rtl.css 11.4 kB
release/woocommerce-payments/dist/settings.css 11.4 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-express-checkout-rtl.css 236 B
release/woocommerce-payments/dist/tokenized-express-checkout.css 236 B
release/woocommerce-payments/dist/tokenized-express-checkout.js 16.8 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.13 kB
release/woocommerce-payments/dist/woopay-express-button.js 23.4 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.31 kB
release/woocommerce-payments/dist/woopay.css 4.28 kB
release/woocommerce-payments/dist/woopay.js 71 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 772 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.47 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.47 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.css 10 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.js 28.4 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.rtl.css 10 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 424 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 585 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 632 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

@@ -3,15 +3,6 @@
*/
import { createContext } from 'react';

const WCPaySettingsContext = createContext( {
Copy link
Contributor Author

@frosso frosso Feb 24, 2025

Choose a reason for hiding this comment

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

The main reason for all the changes is here - the default value of createContext for WCPaySettingsContext was incompatible with the values declared in the client/globals.d.ts file.

By assigning wcpaySettings as the default value of createContext, we can ensure that the two are at least in sync.

All I wanted was to ensure the isLive boolean was correctly typed...

@frosso frosso self-assigned this Feb 24, 2025
@frosso frosso marked this pull request as ready for review February 24, 2025 12:49
@frosso frosso requested review from a team and FangedParakeet and removed request for a team February 24, 2025 12:50
@frosso frosso changed the title feat: GooglePlay live account test node notice feat: GooglePlay live account test mode notice Feb 24, 2025
@frosso frosso changed the title feat: GooglePlay live account test mode notice feat: GooglePay live account test mode notice Feb 25, 2025
Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

OK, first of all, cheers for all the changes here. It took me a while to pore through them all, but I think the tighter typing is a pretty large standard of life improvement.

FWIW, I tested this PR by simply mocking out the WC_Payments_Account class and hard-coding the value of the isLive and everything worked as expected. Implementation looks clean and tidy, so no issues there.

Sadly and truly fatefuly, just as I was about to approve this PR, for some reason I decided to re-read the changelog of all things and I noticed a typo that will either make your ribs tickle or make you want to punch mine. 😁

I'd normally allow it in just the changelog, but it's kind of scattered throughout these changes as well, so if you wouldn't mind updating this PR and removing that devilish "L" from wherever it has managed to sneak in, I think we'll be all good and I'll immediately approve. Apologies in advance for being cursed with these eagle eyes of mine. Cheers.

expect( container.firstChild ).toBeNull();
} );

it( 'does not render when GooglePlay is not enabled', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
it( 'does not render when GooglePlay is not enabled', () => {
it( 'does not render when GooglePay is not enabled', () => {

Aha, I almost missed this one, until I decided to double-check the changelog. Sorry, lol.

Copy link
Contributor

Choose a reason for hiding this comment

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

Same goes for this filename.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think this filename should probably be google-pay-test-mode-compatibility-notice.tsk...and we probably need to amend all the places where this is imported too lol. I think this is the last occurence of this that I could find.

@frosso
Copy link
Contributor Author

frosso commented Feb 26, 2025

@FangedParakeet thank you for noticing - fixed in 5d170c6 .

Honestly, I don't even know why my fingers continuously slipped on that L. You'll notice in the PR's title before your review comment, on the branch name, in the PR's description... I just don't know what possessed my fingers 😅

Screenshot 2025-02-26 at 9 23 35 AM

Copy link
Contributor

@FangedParakeet FangedParakeet Feb 26, 2025

Choose a reason for hiding this comment

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

It's less critical than the other ones, but could we update this filename too please? 🙏

/**
* Internal dependencies
*/
import GooglePayTestModeCompatibilityNotice from '../google-play-test-mode-compatibility-notice';
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
import GooglePayTestModeCompatibilityNotice from '../google-play-test-mode-compatibility-notice';
import GooglePayTestModeCompatibilityNotice from '../google-pay-test-mode-compatibility-notice';

Ooh, this one is a bit more critical. Could we just update this filename and related imports too please? Ta. 👍

Copy link
Contributor Author

@frosso frosso Feb 27, 2025

Choose a reason for hiding this comment

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

Ugh, I thought I had caught everything in the last reivew. But no... she still plays when she should pay. My keyboard was never the faithful type 💔
Appreciate you catching that, thank you for making me see the truth, sorry about the multiple review rounds! I think (hope) I now fixed everything in ae90d7a . Time for me to move on...

@FangedParakeet
Copy link
Contributor

There are a bunch of merchant E2E tests failing on WC latest. Taking a quick peek at them, it doesn't appear that any of them are really even on the Payments settings pages and in some of the failing multicurrency tests, it appears as if the multicurrency widget isn't even found on the E2E test site, which is particularly sus.

It's possible that updating the branch and rerunning will resolve them, but I think some of the same E2E tests have been failing pretty consistently on the last couple commits. Can you just double-check this? If it appears that it is indeed something unrelated and the result of a flaky test, can we just open a quick cheeky new issue to capture resolving these failures? Cheers.

…t. each line you type, a cruel mistake. feels like a game she loves to play, a never-ending push-and-pain. you press my keys but never stay, a line of code then walk away
@frosso
Copy link
Contributor Author

frosso commented Feb 27, 2025

Can you just double-check this?

Still checking this, since I don't see the failure on other PRs :suspect:

@frosso
Copy link
Contributor Author

frosso commented Feb 27, 2025

Ok, it should be solved in dd271c9

Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

Cheers for those pesky little edits! I think this LGTM now. 👍

There is one unit test failing and, while I can't see it failing on a couple other PRs that I glanced at, looking at the test I'm pretty sure it's not related to any of these changes and looking at the failure specifically, it appears to be an error that is off by one-second, so I'm leaning towards this being a flaky test that needs to be fixed (probably shouldn't be an assertSame on that time comparison, but some slightly broader window maybe).

Can you have a quick look at that failing test and, if you come to the same conclusion that I did, can you just pop up a quick issue to fix it (maybe remove the test for the time being--doesn't have to be in this PR), ping the relevant team, and then we can proceed with merging these changes? Cheers!

@frosso
Copy link
Contributor Author

frosso commented Feb 27, 2025

Looks like it passed on retry 💪

@frosso frosso added this pull request to the merge queue Feb 27, 2025
Merged via the queue into develop with commit 4af3a1f Feb 27, 2025
28 checks passed
@frosso frosso deleted the feat/google-play-test-mode-live-account-compatibility-notice branch February 27, 2025 19:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Merchant Communication on Google Pay Test Mode Limitations
3 participants