Ensure dispute urls in order notes are encoded correctly

[brucealdridge]

Fixes #7399

Changes proposed in this Pull Request

URLs to disputes in order notes are rendered incorrectly. Any / characters inside the query string should be encoded as %2F

<a href="https://woo.test/wp-admin/admin.php?page=wc-admin&path=/payments/transactions/details&id=pi_3QKsaDQtab9RariT0e2C6i39" target="_blank" rel="noopener noreferrer">pi_3QKsaDQtab9RariT0e2C6i39</a>

This PR ensures that the path attribute in the query string is URL-encoded correctly.

Implementation Notes

Passing a correctly encoded URL to WC_Payments_Utils::esc_interpolated_html() alters the URL to replace %2F with 0.000000.

<a href="https://woo.test/wp-admin/admin.php?page=wc-admin&path=0.000000payments0.000000transactions2024.000000details&id=ch_3QNQOSQtab9RariT1x7pIdpK" target="_blank" rel="noopener noreferrer">Response due by 2024-11-30</a>

I looked at the possibility of updating this function but couldn't see where it was going wrong. I reviewed the code and found that links to disputes and transactions (issue created) are the only cases where this is affected.

Surprisingly, the WP function add_query_arg doesn’t sanitize or encode the provided values.

I was going to use urlencode but phpcs recommends rawurlencode instead.

Testing instructions

• Purchase a product using a dispute test card such as 4000000000000259
• Visit the WC Order page, confirm that the note is rendering the link correctly
• View the raw order note in the database column wp_comments.comment_content to confirm.

---

• [x] 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.
• [x] Covered with tests (or have a good reason not to test in description ☝️)
• [x] Tested on mobile (or does not apply)

Post merge

• [ ] Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• [ ] Add or update critical flows and testing instructions for critical flows, if applicable.
• [ ] Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[botwoo]

Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 9788 or branch name fix/7399 in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

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

:rocket: Launch a JN site with this branch :rocket:

:information_source: Install this Tampermonkey script to get more options.

---

Build info:

• Latest commit: 6335fa23b37e8c4a98ba956df390809bb5d75acf
• Build time: 2024-11-22 13:21:38 UTC

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

[github-actions[bot]]

Size Change: 0 B

Total Size: 1.33 MB

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `release/woocommerce-payments/assets/css/admin.css` | 1.37 kB | | `release/woocommerce-payments/assets/css/admin.rtl.css` | 1.37 kB | | `release/woocommerce-payments/assets/css/success.css` | 182 B | | `release/woocommerce-payments/assets/css/success.rtl.css` | 184 B | | `release/woocommerce-payments/dist/blocks-checkout-rtl.css` | 2.66 kB | | `release/woocommerce-payments/dist/blocks-checkout.css` | 2.66 kB | | `release/woocommerce-payments/dist/blocks-checkout.js` | 52.9 kB | | `release/woocommerce-payments/dist/cart-block.js` | 16.8 kB | | `release/woocommerce-payments/dist/cart.js` | 5.73 kB | | `release/woocommerce-payments/dist/checkout-rtl.css` | 1.23 kB | | `release/woocommerce-payments/dist/checkout.css` | 1.23 kB | | `release/woocommerce-payments/dist/checkout.js` | 33 kB | | `release/woocommerce-payments/dist/express-checkout-rtl.css` | 229 B | | `release/woocommerce-payments/dist/express-checkout.css` | 229 B | | `release/woocommerce-payments/dist/express-checkout.js` | 14.9 kB | | `release/woocommerce-payments/dist/frontend-tracks.js` | 854 B | | `release/woocommerce-payments/dist/index-rtl.css` | 52.6 kB | | `release/woocommerce-payments/dist/index.css` | 52.5 kB | | `release/woocommerce-payments/dist/index.js` | 302 kB | | `release/woocommerce-payments/dist/multi-currency-analytics.js` | 1.08 kB | | `release/woocommerce-payments/dist/multi-currency-rtl.css` | 4.46 kB | | `release/woocommerce-payments/dist/multi-currency-switcher-block.js` | 60.6 kB | | `release/woocommerce-payments/dist/multi-currency.css` | 4.46 kB | | `release/woocommerce-payments/dist/multi-currency.js` | 57.3 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 kB | | `release/woocommerce-payments/dist/payment-gateways-rtl.css` | 1.32 kB | | `release/woocommerce-payments/dist/payment-gateways.css` | 1.32 kB | | `release/woocommerce-payments/dist/payment-gateways.js` | 38.4 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.1 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` | 224 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` | 229 B | | `release/woocommerce-payments/dist/tokenized-express-checkout.css` | 229 B | | `release/woocommerce-payments/dist/tokenized-express-checkout.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.13 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` | 767 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}

[nagpai]

Manual test

✅ Visit the WC Order page, confirm that the note is rendering the link correctly

/wp-admin/admin.php?page=wc-admin&path=%2Fpayments%2Ftransactions%2Fdetails&id=ch_3xxxxxG

URL renders with encoded params and on clicking opens the correct dispute details too.

✅ View the raw order note in the database column wp_comments.comment_content to confirm.

The same URL appears in the comment content within the DB too.