Apple Pay & Google Pay buttons no longer visible in Standard Payments button previews after moving them to Advanced Card Processing tab (3179)

[stracker-phil]

Problem

After moving Google Pay and Apple Pay settings to the "Advanced Card Processing" tab, the button preview was not available anymore - neither in the "Standard Payments" nor the "Advanced Card Processing" tab.

Background

1. Advanced Card Processing: Did not render the preview because relevant JS files were not enqueued
2. Standard Payments: Did not render the preview because it was tightly coupled to the presence of certain DOM elements (eg the presence of an "is-enabled" checkbox)

Solution

1. Refactor preview button code to decouple it from DOM elements
2. Enqueue relevant JS files in both tabs

Changes

Preview button logic

• Adjust the preview button generator to render an individual button (before this, the button preview always showed a block of all PayPal payment buttons)
• Layout of the single preview button should be as close to other "Button Styling Preview" blocks as possible
• On the "Standard Payments" tab, the APM buttons should be static and not change colors/labels when changing any settings

Overview of code changes

ppcp-button/.../PreviewButton.js

• Contains the common logic to render a single APM button preview
• "Abstract" base class, some methods must be implemented in APM module

ppcp-button/.../PreviewButtonManager.js

• Extracted common logic to manage one or multiple APM PreviewButtons
• Bootstrap logic that loads remote configuration from PayPal
• "Abstract" base class, some methods must be implemented in APM module

Both boot-admin.js

• Implement child classes of PreviewButton and PreviewButtonManager

ppcp-wc-gateway/services.php

• Condition now loads the APM's boot-admin.js in both tabs ("Standard Payments" and "Advanced Card Processing")

Both extensions.php

• APM edit form includes a button preview (at the end)
• Custom attributes for edit-fields, to trigger an update of the button preview

gateway-settings.js

• New light-weight form-observer that interacts with the changes in extensions.php.
• The new observer code only renders & refreshes a single APM button

Screenshots

Fixed preview of the full button block, in the "Standard Payments" tab:

New preview of the single payment button, in the "Advanced Card Processing" tab: