Customizer: Simple Payments Widget breaks when starting without products

[rodrigoi]

This PR fixes a number of issues with the Simple Payments Widget Customizer when the user has either a single product, or no product at all, including:

• Showing a message when the user has no products.
• Correctly loading the product information on the Edit form when there's a single product.
• Correctly loading the product information on the Edit form after creating the first product.
• Preserving the product drop down list selection after a Edit action when the list has more than one product.
• Fixing some PHP warnings present on some themes.

Changes proposed in this Pull Request:

The customizer tool now shows a message when the user has no products loaded.

Before	After

It also makes the first product the explicit default on $instance when the widget is first added, instead of having the widget function make the choice.

It also adds logic to customizer.js to manage the visibility of the new message and the product drop down list.

Testing instructions:

For all cases, please start with an Professional Jetpack site with no previously created Simple Payment products. If you have some, please delete them on Calypso's Editor before testing this PR.

PHP Warnings

Adding a widget when the user has no products fires this PHP warning (as seen on the error log):

PHP Notice:  Trying to get property of non-object in /var/www/html/wp-content/plugins/jetpack/modules/widgets/simple-payments.php on line 269
PHP Stack trace:
PHP   1. {main}() /var/www/html/index.php:0
PHP   2. require() /var/www/html/index.php:17
PHP   3. require_once() /var/www/html/wp-blog-header.php:19
PHP   4. include() /var/www/html/wp-includes/template-loader.php:74
PHP   5. get_footer() /var/www/html/wp-content/themes/twentyseventeen/index.php:71
PHP   6. locate_template() /var/www/html/wp-includes/general-template.php:76
PHP   7. load_template() /var/www/html/wp-includes/template.php:647
PHP   8. require_once() /var/www/html/wp-includes/template.php:688
PHP   9. get_template_part() /var/www/html/wp-content/themes/twentyseventeen/footer.php:22
PHP  10. locate_template() /var/www/html/wp-includes/general-template.php:155
PHP  11. load_template() /var/www/html/wp-includes/template.php:647
PHP  12. require() /var/www/html/wp-includes/template.php:690
PHP  13. dynamic_sidebar() /var/www/html/wp-content/themes/twentyseventeen/template-parts/footer/footer-widgets.php:23
PHP  14. WP_Widget->display_callback() /var/www/html/wp-includes/widgets.php:742
PHP  15. Jetpack_Simple_Payments_Widget->widget() /var/www/html/wp-includes/class-wp-widget.php:372

That may show on some themes:

To verify that this is no longer the case, just add a SP Widget to a sidebar/footer on a site with no previous products and verify that the warning is now present on the error_log or in the page itself.

Edit a Product after adding it

• Add a SP Widget to a sidebar/footer on a site with no previously created products.
  • it should show the new message
• Click Add New and create a new product by filling the form.
• Click Edit Selected without interacting with any other element on the page.

The form should load with the correct information of the recently added product. The Customizer preview should update any changes live, and the changes should be persisted without problems.

Repeat for as many products as you'd like.

Edit a Single Product

• Add a SP Widget to a sidebar/footer on a site with only one product
  • the only product should load on the customizer preview correctly.
• Click Edit Selected without interacting with any other element on the page.

The form should load with the correct information of the single product. The Customizer preview should update any changes live, and the changes should be persisted without problems.

Delete all Products

• Add a SP Widget to a sidebar/footer on a site with multiple products.
• Click Edit Selected and then Delete. Confirm the action.
• Repeat for all products on the drop down list.

When no more products are present, the empty list message should be displayed and the drop down list is no longer visible.

• Add a new product by clicking Add New and filling the form.

The drop down list should be restored, the empty list message hidden and the new product should load correctly on the customizer preview.

• Click Edit Selected

The form should load the newly created product, and changes should be correctly saved.

Known issues:

• The Edit Selected button is not disabled when the user has no products
• The Delete button is not disabled when the user is adding a new product.

[Copons]

I'd like to propose two changes relevant to this PR:

• If there are no SP products, hide or disable the Edit Selected button, otherwise it's unclear what it's actually editing.

• Add an empty option for the product selector, and use it as default for new SP widgets.
  I know that the widget requires a SP, but technically it doesn't, does it?
  If there is no SP selected, the widget simply outputs an empty content; imho that's fine from a UX standpoint, because it's obvious that if you don't select a SP, the widget won't show anything.
  This might also simplify the JS: we wouldn't need to listen to widget events anymore, but just to the select's on change.
  Also, we wouldn't force one arbitrarily selected SP to the user, but we'd implicitly guide them toward selecting an existing SP, or adding a new one.

[gwwar]

🤔 Would the following be possible? @Copons @rodrigoi

Add a top default dropdown option, which contextually changes the button text to "create"

If we select an existing button, text changes to "edit"

[gwwar]

I agree that we can improve the UX further as @Copons suggests, but let's add to that in follow up PRs. I did some light manual testing, and it looks like this fixes a number of issues. Let's resolve conflicts and land this in the feature branch. Thanks @rodrigoi !

[Copons]

Add a top default dropdown option, which contextually changes the button text to "create"

@gwwar Technically yes, but folks might get confused into thinking that the only choice they have is to create a new SP (good if they actually don't have any SP yet; bad otherwise).
Might be because in your screen the select is greyed out, but still, I don't know.

Though, I agree that this is too big for this PR, and should move into a follow up.

But! I still stand behind my first point, which should be simple enough to implement here.
(cc @rodrigoi: feel free to disprove me here, I'm not as familiar as you with this codebase)

If there are no SP products, hide or disable the Edit Selected button, otherwise it's unclear what it's actually editing.