Add validation checks for WC Product Addon required image fields

[gumgumcode]

Summary

Closes https://github.com/woocommerce/woocommerce-gateway-paypal-express-checkout/issues/788.

1. Issue Description

• When you use the PPEC plugin with the WC Product Addon (WCPAO) plugin, the validation check fails for "required image fields".
• If the image field is required and no image option is selected, the PPEC button should be disabled (as it is in case of radio buttons). But it isn't. And that's the issue.

2. Reproducing the issue

1. Install WC, PPEC and WCPAO plugins
2. Create two simple products in WC
3. The first one with a Radio Button Addon field as follows: https://d.pr/i/YCLRAk (PP button is disabled as expected).
4. The second one with two Image fields as follows: https://d.pr/i/KYVimx (PP button is enabled. This is an issue since you can checkout via the PP button without selecting the required image fields).

3. Without PPEC

1. Image fields: Ignoring PPEC validation for a moment, if we try to add the product (having image fields) to the cart, it does a PHP validation and returns an error (https://d.pr/i/ykLkaq). This is good.
2. Radio buttons: If we try doing this with radio buttons, it does a JS validation and asks us to select one of the radio buttons (https://d.pr/i/ZKNjsG). This is good.

4. Potential Solution in WCPAO

1. There's a hidden "select" element on the page: https://github.com/woocommerce/woocommerce-product-addons/blob/590c07b2b8f7c9c31239a75550cb466cc6297422/templates/addons/image.php#L52
2. We can make it required by adding this to it: <?php //if ( WC_Product_Addons_Helper::is_addon_required( $addon ) ) { echo 'required'; } ?>
3. But this breaks the "Add to cart" PHP validation mentioned in section 3, point 1 above. Instead a JS validation takes place and the button does nothing. Why? because the "select" element is hidden and there's no direct indication to the customer explaining why the "Add to cart" button isn't working.
4. This is the easiest fix (on WCPAO's side) but it creates bad UX.
5. Therefore it is best to solve this in PPEC as explained below.

Solution

1. We add extra validation in PPEC to support the "required image fields" in the WCPAO plugin.
2. We create a new function validate_addon_image_fields which targets each "Image Field" containing "Image Swatches".
3. It then makes sure those "Image Fields" have at least one "Image Swatch" selected.
4. If that is the case, then the PPEC button will be enabled, otherwise, it'll stay disabled.
5. This check happens in the existing validate_form function.
6. An additional event is added to make sure the validate_form function is triggered whenever an image swatch is clicked.

Tests

1. Switch to the feature branch
2. Open the product containing WCPAO Image Fields
3. Right off the bat, notice that PPEC button is disabled: https://d.pr/i/lt9Gcu
4. Try the "Add to cart" button. It will do a PHP validation and return an error as expected: https://d.pr/i/epDCvW (This has nothing to do with our new code but a good measure to ensure this button is working).
5. Now try selecting the "Image Swatches" in all the possible combinations you can imagine. You'll see the PPEC button is enabled only when there's at least one "Image Swatch" selected in each "Image Field": https://d.pr/i/2lnVVd

Other

Docs

• No documentation needed

Changelog

• Fix: Add extra validation to support the image fields in WC Product Addon plugin.