Page MenuHomePhabricator

🎬️ desktop-de-11 | Third form page | ⏰ Nov 11th
Closed, ResolvedPublic


We want to test the effect of displaying a third form page asking for the alternative amount.

Acceptance Criteria

  • The banners are based on the control banner of desktop-de-10.
  • When clicking "Ja, ich möchte jährlich spenden, aber einen anderen Betrag." on the 2nd form page, a third page is displayed to ask for an alternative amount.
  • The sentence on the third page says "Geben Sie Ihren jährlichen Spendenbetrag an." (The design says "monatlichen".)
  • The link to the use of funds overlay ("Wohin geht meine Spende?") is displayed below the button. The design is missing it.
  • Clicking the submit button on the third page triggers
    • an event with the action name decreased-amount or increased-amount, depending on whether the user decided to donate a higher or lower amount.
    • the usual submit event, prefixing the banner name by submit-different-amount-.

Event Timeline

kai.nissen updated the task description. (Show Details)
kai.nissen added a subscriber: gabriel-wmde.

I created a first draft of the banner in , but it's far from finished:

  • We need to decide if we want to pass the regular get/set/validate custom amount functions to the third page or if we want to keep the state from the 1st page and allow to change it on the 3rd page, but only if it's valid and the user does not go back. reusing the custom amount state from page 1 has less code, but the user would have to go back to page 1 if he invalidates the amount on page 3 and goes back to page 2. Having a 2nd instance of the custom amount for the 3rd page makes for a better user experience, but means *duplicating* a lot of code for the custom amount. I'd be still inclined to go with separate state for the 3rd page and have a property in the new form component (but no validation/setter/form transition yet).
  • 3-page-form.pcss needs to be implemented for DonationForm and goku theme (similar to 2-page-form.pcss, but styles for the 3rd page)
  • The 3rd page does not have any styling at all.
  • The amount of duplication is atrocious. The first 2 hours on working on this banner I have tried to refactor BegYearlyRecurringDonationForm into smaller components that can be reused, but everything is coupled very tightly. I abandoned the refactoring to work on the feature, but I would very much like to have a second try. The change I'm thinking of would make each page its own, self-contained <form> element with its own state, initial values passed in through props and an onSubmit property that checks the validity and on valid values then either submits the form or goes to the next page (passing the current values for interval, payment type and amount to the next page as event data).

In "parent" element that ties the pages together (Currently BegYearlyRecurringDonationFormCustomAmount) should do only page switching, maybe state changes on page switching (changing the props passed to the next page, but maybe that can be done internally by the submit functions of the individual forms) and height adjustment, everything else should be left to the children.

@AbbanWMDE There are some issues with the variant banner:

  • Clicking the submit button on the first page without making any input shows error messages in the form, but redirects to the Fundraising Application.
  • Checking the custom amount option and leaving the field empty shows an error message, but the form switches to the 2nd page. (probably the same issue)
  • Submitting the form on third page triggers the decreased-amount and increased-amount, but they are swapped. Also we probably need another action name in case the user enters the same amount again.
  • The headline ("Vielen Dank für Ihre Unterstützung!") of the 3rd form page is missing.