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

Reorganise payments overview currency switcher, welcome message and balances card #8791

Merged
merged 63 commits into from
Jun 7, 2024

Conversation

Jinksi
Copy link
Member

@Jinksi Jinksi commented May 7, 2024

Fixes #8790

Important

This pull request is based on PR #8896 to use the new select component introduced in that PR. Please merge it to develop before merging this PR.

Caution

These changes are not behind a feature flag.

Changes proposed in this Pull Request

This PR replaces the Payments Overview currency-switching tabs with a new currency selector dropdown.

View design.

Note

A subsequent issue #8490 will handle the Payments Activity Card currency-switching, which is not part of this PR

currency.select.component.demo.mov

Before/After

Before
image

After
image

After – stores with a single deposit currency

image

TODO

Testing instructions

Tip

This PR is currently available to test on the Helix WooExpress demo site. Ask a team Helix member for access.

  • Open Payments → Overview
  • Single deposit currency stores should show the Welcome message without a currency select
  • Multi deposit currency stores should show the Welcome message with a currency select
    • You can get a multi-deposit currency store by onboarding with a country that supports multiple deposit currencies and adding bank accounts during Stripe KYC
    • Selecting a currency will update the currency shown on the Payments Overview page
      • Check all balances and cards reflect the change of currency (except Payment Activity Card)
      • Ensure the tracks event wcpay_overview_currency_select_change is recorded
      • Ensure the selected_currency query param reflects the currently selected currency
    • Remove the selected_currency query param from the URL and navigate to it. Ensure the default deposit currency is then selected.
    • Add an invalid selected_currency query param to the URL (e.g. selected_currency=123) and navigate to it. Ensure the default deposit currency is then selected.

  • 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 May 7, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8791 or branch name update/8765-payments-overview-currency-select 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: 3cfe037
  • Build time: 2024-06-07 05:11:11 UTC

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

Copy link
Contributor

github-actions bot commented May 7, 2024

Size Change: +1.43 kB (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 41.1 kB +354 B (+1%)
release/woocommerce-payments/dist/index.css 41 kB +360 B (+1%)
release/woocommerce-payments/dist/index.js 293 kB +719 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 172 B
release/woocommerce-payments/assets/css/success.rtl.css 172 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.js 51.1 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 530 B
release/woocommerce-payments/dist/bnpl-announcement.css 531 B
release/woocommerce-payments/dist/bnpl-announcement.js 20 kB
release/woocommerce-payments/dist/cart-block.js 15.3 kB
release/woocommerce-payments/dist/cart.js 4.5 kB
release/woocommerce-payments/dist/checkout-rtl.css 599 B
release/woocommerce-payments/dist/checkout.css 599 B
release/woocommerce-payments/dist/checkout.js 31.5 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 155 B
release/woocommerce-payments/dist/express-checkout.css 155 B
release/woocommerce-payments/dist/express-checkout.js 3.59 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.7 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.8 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.js 38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 5.92 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 388 B
release/woocommerce-payments/dist/plugins-page.css 388 B
release/woocommerce-payments/dist/plugins-page.js 19.3 kB
release/woocommerce-payments/dist/product-details-rtl.css 398 B
release/woocommerce-payments/dist/product-details.css 402 B
release/woocommerce-payments/dist/product-details.js 11.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11 kB
release/woocommerce-payments/dist/settings.css 10.9 kB
release/woocommerce-payments/dist/settings.js 201 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 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 18.5 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 155 B
release/woocommerce-payments/dist/tokenized-payment-request.css 155 B
release/woocommerce-payments/dist/tokenized-payment-request.js 6.33 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.86 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 15.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.25 kB
release/woocommerce-payments/dist/woopay.css 4.22 kB
release/woocommerce-payments/dist/woopay.js 69.4 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 196 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 196 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 627 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 628 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 390 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 214 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 523 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 722 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 408 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 517 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 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.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 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.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 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 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 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 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

@Jinksi Jinksi changed the base branch from develop to add/8788-select-component-for-currency-switcher June 4, 2024 04:39
@Jinksi Jinksi requested a review from a team June 6, 2024 23:48
Copy link
Contributor

@jessy-p jessy-p left a comment

Choose a reason for hiding this comment

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

I have tested these changes as well as implemented & tested #8915 on this branch, its working seamlessly.

Base automatically changed from add/8788-select-component-for-currency-switcher to develop June 7, 2024 04:13
@Jinksi
Copy link
Member Author

Jinksi commented Jun 7, 2024

I'll fix a PW e2e test had I've inadvertently broken with these changes

1) [basic] › basic.spec.ts:20:8 › A basic set of tests to ensure WP, wp-admin and my-account load › Sign in as admin › Load Payments Overview 
    Error: Timed out 10000ms waiting for expect(locator).toBeVisible()

    Locator: getByAltText('WooPayments logo')
    Expected: visible
    Received: hidden
    Call log:
      - expect.toBeVisible with timeout 10000ms
      - waiting for getByAltText('WooPayments logo')


      24 | 				await page.waitForLoadState( 'domcontentloaded' );
      25 | 				const logo = page.getByAltText( 'WooPayments logo' );
    > 26 | 				await expect( logo ).toBeVisible();
         | 				                     ^
      27 | 			} );
      28 | 		} );
      29 |

✅ Fixed in c6da1bf

@nagpai
Copy link
Contributor

nagpai commented Jun 7, 2024

Minor - On the mobile view, the currency switcher appears on top of the greeting and the spacing seems a bit non uniform / awkward. It may need some design input . The center alignment seems off a bit too.

@Jinksi
Copy link
Member Author

Jinksi commented Jun 7, 2024

On the mobile view, the currency switcher appears on top of the greeting and the spacing seems a bit non uniform / awkward. It may need some design input .

Thanks @nagpai! I noticed this as well and pushed commit be6e613 moments before your comment 😅

image

@Jinksi Jinksi added this pull request to the merge queue Jun 7, 2024
Merged via the queue into develop with commit a719ace Jun 7, 2024
23 checks passed
@Jinksi Jinksi deleted the update/8765-payments-overview-currency-select branch June 7, 2024 05:24
@Jinksi
Copy link
Member Author

Jinksi commented Jun 14, 2024

The update when switching currency is instantaneous. That works, and it's super fast/snappy 🎸 . We might want to look at an animation or transition to make it obvious what's happening

@haszari I've opened #8963 for us to improve this

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.

Reorganise payments overview currency switcher, welcome message and balances card
6 participants