Add bgcolor and textcolor fields to DonateBanner model

[ramram-mf]

Description

This PR updates the DonateBanner model with the addition of two new fields background_color and text_color, allowing the user to customize the donate banner present on all site pages. It also renames the previously incorrectly named background_image to foreground_image and adds a background_image field to store the newly implemented background image feature for the banner.

To test

1. Open the review app Wagtail auth page, authenticate with admin2:admin2 credentials.
2. Navigate to the Settings > Donate banner page, click on the Choose in order to pick a banner to show.

3. Select a banner from the list by clicking on its name. Save by clicking on the Save button on the bottom of the page.

4. Edit the selected banner by clicking on the three dots next to its name and then selecting the Edit menu:

5. Note the new model fields Background image, Background color and Text color. Customize the background color of the banner. Save and browse the preview app homepage.
   

6. Confirm that the background color has changed in the homepage.

7. Edit again the donate banner and upload a background image. Save and confirm changes reflect on the homepage.

Link to sample test page: https://foundation-s-tp1-1234-i-bhpnku.herokuapp.com/en/
Related PRs/issues: #12881

┆Issue is synchronized with this Jira Story

[mmmavis]

Hey @ramram-mf , thanks for adding these customization options for the donate banner. I have left a few comments that I think would help with UX and code maintainability.

[beccaklam]

Hi @ramram-mf! Thank you for your work on this, it's looking good 👍 Just adding the notes we discussed:

1. I think we should limit the colours to the following for now: black, white, Red 40 #FF4F5E and Blue 40 #595CF3
2. The background colour option should be disabled when a user has chosen to upload a background image so that it's clear the background image will load instead of the background colour. If the user clears the background image choice, the background colour will be enabled again.

[beccaklam]

Thank you for making those changes @ramram-mf! This looks good to me.

[danielfmiranda]

Hi @ramram-mf!

Thanks very much for taking this work on. After testing this out on the review app, I can confirm that everything is working as expected. I appreciate you fixing the indexing issue when it came to repurposing the background_image field name, and transferring over existing data. Great work!

I liked your approach of disabling the background_color field when a background image is selected.

However, I have a slight concern that users might find it a bit confusing without immediate context, as there isn’t any help text to clarify why background_color is disabled when both fields are set, until they hit “Save.”

To simplify things and add clarity for users, I’d suggest leveraging Wagtail’s MultiFieldPanel and HelpPanel. This would allow us to provide clear instructions right within the CMS interface. Here’s an example:

MultiFieldPanel(
    [
        HelpPanel(content="Select either an image or a color to serve as the background for the banner."),
        FieldPanel("background_image"),
        FieldPanel("background_color"),
    ],
    heading="Background",
)

With this approach, the CMS will display clear instructions before users make their selection:

We can then handle validation in the models clean() method.

Here's what that might look like:

    def clean(self):
        super().clean()

        both_selected_error = "Please select either a background image or a background color for the banner."
        none_selected_error = "Please select a background image or a background color for the banner."

        # Validate that either background_image or background_color is set, not both.
        if self.background_image and self.background_color:
            raise ValidationError(
                {
                    "background_image": ValidationError(both_selected_error),
                    "background_color": ValidationError(both_selected_error),
                }
            )
        if not self.background_image and not self.background_color:
            raise ValidationError(
                {
                    "background_image": ValidationError(none_selected_error),
                    "background_color": ValidationError(none_selected_error),
                }
            )

This way, if both or none of the fields are set, they’ll see a styled validation error reminding them to choose just one:

This update could help streamline the user experience and keep the codebase leaner by removing the two new files needed for the custom disabling logic. Let me know what you think!

Thanks again for your hard work!

[danielfmiranda]

Thanks @ramram-mf! Great work 🙌 LGTM

[mmmavis]

Nice work @ramram-mf ! Also thank you @danielfmiranda for your great suggestion.