Skip to content

Conversation

@ismaeldcom
Copy link
Contributor

@ismaeldcom ismaeldcom commented Mar 13, 2025

Fixes #9726

Changes proposed in this Pull Request

  • Completely remove fraud-risk-tools-banner code.
  • Remove anchor-based implementation, as we are no longer linking to it.
  • Show the tour only when fraud settings are visible.
  • Update setps references and use spotlight instead of overlay effect.
  • Fix the arrow indicator.
  • Fix the mobile implementation.
  • Minor copy update to remove the new feature wording.
  • Remove redundant tests and update affected ones.

The issue criteria is show for new merchants the first time they navigate to the Payments → Settings page, but after testing I think it leads to an awkward user experience as they are presented with it directly. Instead, I've decided to show it when the fraud settings are visible, either by scrolling or directly linking.

Since the boxes were all over the place, I updated their referenced elements and switched to spotlight mode, which points to a specific part better. And fixed the arrow and mobile issues.

Testing instructions

  • Checkout the PR branch
  • Run npm run build:client
  • If you already dismissed the tour, you can return false here to skip the option check
  • Go to Payments → Settings and scroll down until you see the fraud settings
  • The tour should be displayed
  • Confirm that all the steps point to their appropriate reference in desktop and mobile modes.

Screenshots

Before After
Screenshot 2025-03-13 at 10 10 32 Screenshot 2025-03-13 at 10 08 22
Screenshot 2025-03-13 at 10 10 12 Screenshot 2025-03-13 at 10 07 57

  • 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

@ismaeldcom ismaeldcom self-assigned this Mar 13, 2025
@botwoo
Copy link
Collaborator

botwoo commented Mar 13, 2025

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 10558 or branch name remove/9726-fraud-protection-discoverability 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: 48d7853
  • Build time: 2025-03-21 07:20:16 UTC

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

@github-actions
Copy link
Contributor

github-actions bot commented Mar 13, 2025

Size Change: -34 kB (-3%)

Total Size: 1.27 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 19.1 kB -16.7 kB (-47%) 🎉
release/woocommerce-payments/dist/index.css 19.1 kB -16.7 kB (-47%) 🎉
release/woocommerce-payments/dist/index.js 239 kB -451 B (0%)
release/woocommerce-payments/dist/settings-rtl.css 11.4 kB -45 B (0%)
release/woocommerce-payments/dist/settings.css 11.3 kB -46 B (0%)
release/woocommerce-payments/dist/settings.js 223 kB -31 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.41 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.42 kB
release/woocommerce-payments/assets/css/success.css 1.05 kB
release/woocommerce-payments/assets/css/success.rtl.css 1.05 kB
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.74 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.74 kB
release/woocommerce-payments/dist/blocks-checkout.js 56.2 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.7 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.9 kB
release/woocommerce-payments/dist/frontend-tracks.js 854 B
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-switcher-block.js 60.8 kB
release/woocommerce-payments/dist/multi-currency.css 4.29 kB
release/woocommerce-payments/dist/multi-currency.js 58.2 kB
release/woocommerce-payments/dist/order-rtl.css 740 B
release/woocommerce-payments/dist/order.css 740 B
release/woocommerce-payments/dist/order.js 42.3 kB
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/payment-gateways.js 39.1 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 375 B
release/woocommerce-payments/dist/plugins-page.css 375 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.7 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/success.js 6.03 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.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.13 kB
release/woocommerce-payments/dist/woopay-express-button.js 23.5 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.1 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 957 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.3 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.1 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.js 29.7 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.rtl.css 10.1 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/jetpack-users-connection.js 161 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 625 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

@ismaeldcom ismaeldcom requested a review from a team March 13, 2025 14:04
@jessepearson
Copy link
Contributor

@ismaeldcom Is there any way to add some sort of padding at the top on mobile? When I test in that view, the automatic scrolling scrolls the highlighted section to the top, but that gets hidden behind the header bar.

Screenshot 2025-03-20 at 11 10 08 AM
Screenshot 2025-03-20 at 11 09 17 AM
Screenshot 2025-03-20 at 11 09 25 AM

@ismaeldcom
Copy link
Contributor Author

ismaeldcom commented Mar 20, 2025

Is there any way to add some sort of padding at the top on mobile? When I test in that view, the automatic scrolling scrolls the highlighted section to the top, but that gets hidden behind the header bar.

Great catch @jessepearson, I somehow misplaced block: 'nearest' while rebasing my changes. It controls how the scroll functionality works using these settings. After different tests, I've noticed that nearest works the best for our case, although it is not perfect either.

Let me know what you think after pulling 28994a4 🙂

Copy link
Contributor

@jessepearson jessepearson left a comment

Choose a reason for hiding this comment

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

Tested and works as described, thanks for the quick fix on the location/padding issue.

Screenshot 2025-03-20 at 11 46 15 AM
Screenshot 2025-03-20 at 11 46 24 AM
Screenshot 2025-03-20 at 11 46 33 AM
Screenshot 2025-03-20 at 11 46 42 AM
Screenshot 2025-03-20 at 11 47 11 AM
Screenshot 2025-03-20 at 11 47 24 AM
Screenshot 2025-03-20 at 11 47 32 AM
Screenshot 2025-03-20 at 11 47 46 AM

@ismaeldcom ismaeldcom added this pull request to the merge queue Mar 21, 2025
Merged via the queue into develop with commit 4b0d48b Mar 21, 2025
28 checks passed
@ismaeldcom ismaeldcom deleted the remove/9726-fraud-protection-discoverability branch March 21, 2025 09:14
@htdat
Copy link
Member

htdat commented Mar 26, 2025

👋 @ismaeldcom - It seems there are still some leftovers, which makes me a bit confused when looking at the relevant option keys. I remembered that last week, I could see the banner but with the latest develop, I am no longer see the banner though these options are still there :D

frtDiscoverBannerSettings: JSON.stringify( {

frtDiscoverBannerSettings: string;

'wcpay_frt_discover_banner_settings',

'frtDiscoverBannerSettings' => get_option( 'wcpay_frt_discover_banner_settings', '' ),

@ismaeldcom
Copy link
Contributor Author

👋 Hey! Great catch @htdat, thanks for tracking these leftovers, I missed them. I just pushed #10635 🙂

@ismaeldcom ismaeldcom added this to the WooPayments 9.2.0 milestone Mar 26, 2025
@ismaeldcom ismaeldcom removed this from the WooPayments 9.2.0 milestone Mar 26, 2025
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.

Remove Fraud Protection discoverability banner and modify fraud protection welcome tour trigger

5 participants