When enabling Pay Later messages, settings for both layouts (text/flex) are being shown simultaneously

[jorgeatorres]

Describe the bug

On the settings screen, when Pay Later messages is initially disabled (or if you disable it first) enabling the option displays settings that apply to both the "Text" and "Flex" layouts, which is incorrect. This is true for the checkout, single product and cart sections.

This is because groupToggle() in settings.js only takes into account settings that immediately depend on the "parent" toggle, but not settings that in turn depend on one of the possibly displayed toggles.

For example #field-message_flex_color depends on #ppcp-message_enabled and so toggling the latter makes the former immediately appear, but that's not correct because #field-message_flex_color also depends on #ppcp-message_layout being set to flex.

To reproduce

1. Uncheck "Enable message on Checkout" if initially enabled.
2. Enable message on Checkout by clicking "Enable on Checkout".
3. Confirm that regardless of the current layout, the following settings appear: layout, logo, logo position, text color, color, ratio.
4. Choose a different layout and confirm that now only settings that appear to that layout are shown.
5. Repeat the above with the other layout option.

Screenshots

Screencast illustrating the problem:

Expected behavior

Only settings that apply to the layout chosen should appear.