I created a first draft of the banner in https://github.com/wmde/fundraising-banners/pull/1124 , 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.

PR: https://github.com/wmde/fundraising-banners/pull/1124

@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.

Hopefully all are fixed now