Move rendering of Order Attribution inputs fully to JS

[tomalec]

This is a bit more revolutionary version of #44333, that aims to make the OA more resilient to bugs like #44159

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

• Define custom element for order-attribution
  to move DOM manipulations to JS only.
  To support multiple checkout & register forms on the same page.

Addresses #44159

Before, the responsibility to manipulate DOM in regards to Order Attribution data for the classic forms was spread between PHP and JS. This was IMHO making the code harder to maintain, as a developer needs to jump between files to understand the logic. It also occurred to be pretty bug-prone, as we have at least two reports on some mismatch, where the JS is in place expecting the inputs to be rendered by PHP, but for some reason, they are not fully rendered.

• order-attribution.min.js is throwing an error causing the rest of my JS to break #44159
• Cannot set properties of null (setting 'value'); line 61: $( input[name="${params.prefix}${key}"] ).value = value; #44353
  This PR moves the logic completely to JS. The only thing that PHP does is to declaratively stamp a single HTML element (<wc-order-attribution-inputs>) in respective form.
  Then, the element itself (defined in JS) would populate itself with complete form data.

Such change also adds the support for more complex use cases when there are multiple checkout and/or registration forms on the same page.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Fix the bugs

1. Reproduce any of the issues mentioned above (TBD)
2. Check that there are no errors

Multiple forms

1. Add two classic checkout forms on the same page
2. Proceed with shopping to this page
3. In browser dev tools call: document.querySelectorAll( `wc-order-attribution-inputs` )
   • It should report return two elements
   • Both filled with inputs and data:
     

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Move the rendering of Order Attribution inputs fully to JS. Support multiple instances on the same page.

Comment

[github-actions]

Test Results Summary

Commit SHA: 9b25355

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	326	0	0	17	0	343	7m 28s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[tomalec]

In the issue thread, @RistoNiinemets mentioned:

Maybe <wc-order-attribution-inputs>? 😄

Do you mean to rename the element's name to plural with "s" at the end?

I was thinking about it but couldn't decide ;)
Ideally, I'd make it, like:

window.customElements.define( 'wc-order-attribution-input', class extends HTMLElement {
	set values( values ) {
			this.#internals.setFormValue( … );
		}
	}

So, there would be just a single <wc-order-attribution-input></wc-order-attribution-input> that submits all the field values at once without sprouting multiple inputs.

But, as setFormValue is not going to land in Safari any soon, maybe it's better to call it what it is, not what we wish. ;)

[github-actions]

Hi , @woocommerce/ventures

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[layoutd]

👍🏻 Thanks @tomalec, this works as described.

I noticed one small typo.