Epic: add donation amount level descriptions

[JoshuaHungDinh]

Resolves: GIVE-577

Requires: Form Builder Library release

Zeplin Design

Description

This task involves enhancing the Donation Amount block by adding text descriptions to be associated with each donation level. The default state of descriptions is disabled, however a toggle is now available to enable descriptions. Once enabled text area input fields are shown for each level.

To accomplish this we have reduced all the previously split attributes for the level into a single levels attribute. The levels attribute now holds default value, the level value, the label(description) & an optional id.

Additional changes:

• Updated UI for the Donation Options Inspector controls/settings
• New UI for the block preview & frontend

Pull Requests:

Fix: Update Currency Switcher integration #7366

Refactor: Update DonationAmountLevels template to support descriptions #7363

Refactor: Change v2 to v3 migration to include level descriptions #7362

Refactor: Merge block level attributes #7361

Refactor: update amount node conversion with descriptions & descriptionsEnabled #7355

Feature: add level descriptions block-placeholder #7354

Feature: update amount block settings with descriptions #7353

Refactor: update price option settings control #7350

Affects

The Donation Amount block.

Visuals

donation.type.control.mov

description.formbuilder.mov

Frontend.UI.mov

Testing Instructions

Donation Type Control:

• Switch new toggle between Multi & Fixed.
• The block preview and inspector controls should toggle displaying different previews and settings.

Descriptions FormBuilder Preview/Controls:

• Toggle the Enable descriptions setting, verify the description controls and the new block preview in the editor display.
• Try updating some of the descriptions, as well as selecting a new default & rearranging the order. You should see these changes live in both the controls and the editor preview.
• Verify the descriptions setting publishs/saves properly.

Frontend UI:

• Verify the new descriptions display on the frontend with the new design.

v2 -> v3 Migration:

• Create a v2 form using donation levels.
• Migrate that form to v3.
• Confirm that levels have been migrated properly.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[rickalday]

Passed manual QA tests.

[jonwaldstein]

@pauloiankoski @JoshuaHungDinh I tried to run build and i'm getting an error, do we need another form builder library release?

[pauloiankoski]

@jonwaldstein Indeed. We have implemented the max length in the description field. Without updating the package, the PR might break.

[jonwaldstein]

@pauloiankoski okay good to know, in the future we don't want to merge features that depend on external releases until it's safe to do so - in this case we needed the form builder library release before we can merge the implementation PR. This would be an example of a blocker that you can raise to me to help unblock.

[jonwaldstein]

@pauloiankoski @JoshuaHungDinh @rickalday

I'd like to add an additional QA test to confirm the donation level schema migration for backwards compatibility.

1. Before using this PR, create a v3 form with donation amount levels
2. Switch to this PR and confirm the existing donation amount levels are working properly

We need to confirm existing donation amount blocks are migrated to the new schema successfully. This is very important to make sure or else it could significantly impact existing donation amount fields.

Side note @pauloiankoski I believe we can write a unit test for the run() method in UpdateDonationLevelsSchema to assert this as well 😄

I ran into this issue that could very well be a js cache'ing problem on my end - but it made me want to circle back and confirm the migration.

[pauloiankoski]

Side note @pauloiankoski I believe we can write a unit test for the run() method in UpdateDonationLevelsSchema to assert this as well 😄

@jonwaldstein Test implemented on ca0b514

[jonwaldstein]

@JoshuaHungDinh @pauloiankoski I updated the form builder library to new version 0.6.0