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

Refactor the Woopay Checkout Flow UX #8133

Merged
merged 7 commits into from
Feb 7, 2024

Conversation

rafaelzaleski
Copy link
Contributor

@rafaelzaleski rafaelzaleski commented Feb 5, 2024

Fixes 2448-gh-Automattic/woopay

Changes proposed in this Pull Request

Modifies the conditions under which shoppers are redirected to the WooPay checkout page or prompted with the OTP modal.

Testing instructions

Precondition: Enable the direct checkout feature flag.

npm run wp option update _wcpay_feature_woopay_direct_checkout 1

Scenario 1: Pre-populated Email Without Auto-Redirect

  1. Navigate to the merchant site's checkout page as a WooPay shopper with your email pre-populated.
  2. Confirm that you are not auto-redirected to the WooPay checkout page.
  3. Confirm that the WooPay OTP modal does not appear.

Scenario 2: Active Email Entry With WooPay Account

  1. Navigate to the merchant site's checkout page without an email pre-populated.
  2. Actively enter an email address associated with a WooPay account.
  3. Confirm that the WooPay OTP modal appears.
  4. If authenticated, confirm that you are auto-redirected to the WooPay checkout page.

Scenario 3: Active Email Entry Without WooPay Account

  1. Navigate to the merchant site's checkout page without an email pre-populated.
  2. Actively enter an email address not associated with a WooPay account.
  3. Confirm that the WooPay OTP modal does not appear.
  4. Confirm that you are not auto-redirected to the WooPay checkout page.

Scenario 4: Feature Flag Dependency

  1. Disable the WooPay Direct Checkout feature flag.
    npm run wp option update _wcpay_feature_woopay_direct_checkout 0
  2. Repeat the above scenarios and confirm that the previous behavior (auto-redirect and OTP modal appearance regardless of email pre-population) occurs.

  • 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

@rafaelzaleski rafaelzaleski self-assigned this Feb 5, 2024
@botwoo
Copy link
Collaborator

botwoo commented Feb 5, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8133 or branch name refactor/2448-woopay-checkout-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: f5448a7
  • Build time: 2024-02-07 19:01:57 UTC

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

Copy link
Contributor

github-actions bot commented Feb 5, 2024

Size Change: +21 B (0%)

Total Size: 1.27 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 83.7 kB +10 B (0%)
release/woocommerce-payments/dist/checkout.js 35.9 kB +11 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.06 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.81 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.81 kB
release/woocommerce-payments/dist/checkout-rtl.css 318 B
release/woocommerce-payments/dist/checkout.css 319 B
release/woocommerce-payments/dist/index-rtl.css 37 kB
release/woocommerce-payments/dist/index.css 37 kB
release/woocommerce-payments/dist/index.js 291 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.4 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 61.2 kB
release/woocommerce-payments/dist/multi-currency.css 3.4 kB
release/woocommerce-payments/dist/multi-currency.js 56.6 kB
release/woocommerce-payments/dist/order-rtl.css 693 B
release/woocommerce-payments/dist/order.css 696 B
release/woocommerce-payments/dist/order.js 42.6 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.31 kB
release/woocommerce-payments/dist/payment-gateways.css 1.31 kB
release/woocommerce-payments/dist/payment-gateways.js 40.2 kB
release/woocommerce-payments/dist/payment-request-rtl.css 153 B
release/woocommerce-payments/dist/payment-request.css 153 B
release/woocommerce-payments/dist/payment-request.js 12.2 kB
release/woocommerce-payments/dist/product-details.js 919 B
release/woocommerce-payments/dist/settings-rtl.css 10.3 kB
release/woocommerce-payments/dist/settings.css 10.3 kB
release/woocommerce-payments/dist/settings.js 235 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.4 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 20.9 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 2.06 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 153 B
release/woocommerce-payments/dist/woopay-express-button.css 153 B
release/woocommerce-payments/dist/woopay-express-button.js 51.3 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.18 kB
release/woocommerce-payments/dist/woopay.css 4.19 kB
release/woocommerce-payments/dist/woopay.js 70.9 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 812 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
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-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.37 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.37 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

@rafaelzaleski rafaelzaleski marked this pull request as ready for review February 6, 2024 17:48
@rafaelzaleski rafaelzaleski requested review from a team and cesarcosta99 and removed request for a team February 6, 2024 17:50
Copy link
Contributor

@cesarcosta99 cesarcosta99 left a comment

Choose a reason for hiding this comment

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

LGTM! I tested all scenarios with classic and Blocks checkouts and all passed 💯

  • Scenario 1: Pre-populated Email Without Auto-Redirect
    • With feature flag enabled the OTP modal is not displayed and user is not redirected ✅
    • With feature flag disabled the OTP modal is displayed, and user is redirected to the WooPay checkout if they're authed ✅
  • Scenario 2: Active Email Entry With WooPay Account
    • With feature flag enabled ✅
      • If user is authed, the user is redirected to the WooPay checkout ✅
      • If user is not authed, the OTP modal is displayed ✅
    • With feature flag disabled ✅
      • Same as with feature flag enabled ✅
  • Scenario 3: Active Email Entry Without WooPay Account
    • With feature flag enabled the OTP modal is not displayed and user is not redirected ✅
    • With feature flag disabled the OTP modal is not displayed and user is not redirected ✅

All the testing confirms that all the acceptance criteria are met ✅

@rafaelzaleski rafaelzaleski added this pull request to the merge queue Feb 7, 2024
Merged via the queue into develop with commit 204f395 Feb 7, 2024
22 of 26 checks passed
@rafaelzaleski rafaelzaleski deleted the refactor/2448-woopay-checkout-flow branch February 7, 2024 19:12
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.

3 participants