Feat/donate block tiers layout

[adekbadek]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds an alternative, "tiers-based" layout to the Donate block:

Above in the "Alternate" block style version

It's called "Tiers-based" layout (vs. the default "Frequency-based" layout), but I'm not sure about the naming here. Suggestions are welcome.

Closes https://github.com/Automattic/newspack-product/issues/53

How to test the changes in this Pull Request:

1. Set Stripe as the Reader Revenue platform
2. On master, create a page with three Donate blocks, set each to different style
3. Switch to this branch, ensure these all render as expected
4. Switch all to "Tiers-first" in the sidebar "Layout" panel
5. Visit the front-end, make a few donations using the new block layout, observe amounts and frequencies translating to Stripe

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

Haven't reviewed yet, but for this:

It's called "Tiers-based" layout (vs. the default "Frequency-based" layout), but I'm not sure about the naming here. Suggestions are welcome.

I'd suggest just "Frequency" and "Tiers".

[thomasguillot]

This is cool!

I'm very pleased with this. Just a few questions/suggestions:

• Can we style the 3 buttons differently? Ideally the "best value" box should have a filled button but the other 2 boxes should have outlined buttons. So we have 1 primary CTA and 2 secondary CTAs.
• Can we make the "best value" label background/text colours customisable?
• Same with the "best value" black border, could we customise this? (thickness + colour inc. gradient)

[adekbadek]

Can we style the 3 buttons differently? Ideally the "best value" box should have a filled button but the other 2 boxes should have outlined buttons. So we have 1 primary CTA and 2 secondary CTAs.

Done in 49a99ef :

Can we make the "best value" label background/text colours customisable?
Same with the "best value" black border, could we customise this? (thickness + colour inc. gradient)

Please submit a separate issue for this, this PR is pretty large as it is.

[dkoo]

This is a big new feature—thanks for implementing! It's mostly clean, and I confirmed that existing Donate blocks continue to behave nicely with the new features as well.

I did run into some issues, some questions, and some non-blocking nitpicks.

[dkoo]

Seeing some new behavior now which needs mitigation.

1. For some reason, on the front-end the block form loads without a selected state. Confirmed that this happens for both new and pre-existing block instances, and both manually-configured and default settings. The block looks like this on initial page load, and doesn't show any tier info until I click on the Monthly or Annual tabs:

2. When I submit the form, the JS doesn't seem to capture the submit event. On AMP or AMP Plus, the page simply reloads with my form inputs appended to the URL (as in default HTML form submit behavior), and on non-AMP, submitting the form does nothing.

3. If the default Reader Revenue > Donation settings are untiered, then "Tiers" still appears as a layout option for Donate blocks, but is unselectable.

All issues confirmed resolved after the latest round of changes.

[dkoo]

@adekbadek thank you for all of the updates and improvements on this PR. Getting really close now. There are still a couple of minor unresolved threads above, and I found another minor bug which I hadn't noticed before.

On the Stripe-enabled block, if you submit a tiered form by filling out all required fields and hitting "enter" (on the keyboard), the form display goes back to the initial view with all tiers, and the success message isn't visible.

[adekbadek]

For some reason, on the front-end the block form loads without a selected state.

Fixed in de2ae2b!

When I submit the form, the JS doesn't seem to capture the submit event.

Can't reproduce that. As concluded in a DM, this is not reproducible, must've been a build issue.

If the default Reader Revenue > Donation settings are untiered, then "Tiers" still appears as a layout option for Donate blocks, but is unselectable.

Fixed in de6212e

[dkoo]

Preapproving since the last remaining thread may not be an issue at all. Feel free to merge after @thomasguillot weighs in on the desired behavior.

[matticbot]

🎉 This PR is included in version 1.60.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.60.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀