Acceptance Criteria

• The banners are based on the control banner of mobile-de-05.
• Screenshots of the banners are uploaded to Shutterbug.
• If the mini banner is too high for the viewport,
  • it's not displayed.
  • an event is triggered in WMDEBannerSizeIssue.
• Variant banner:
  • If a user chooses to make a one-time donation and didn't select Sofortüberweisung,
    • the submit button label changes to just "Weiter".
    • the banner shows a modal overlay asking to switch to a yearly recurring donation.
    • the modal overlay impression is logged as an event in WMDEBannerSizeIssue.
  • The design of the modal overlay is taken from the Figma file.
  • The first button
    • leaves the input data as is
    • triggers an event named submit-non-recurring in WMDEBannerSizeIssue.
    • sends the input data to the Fundraising Application.
  • The second button
    • changes the payment interval to yearly.
    • triggers an event named submit-recurring in WMDEBannerSizeIssue.
    • sends the data to the Fundraising Application.
  • The link below the buttons
    • changes the payment interval to yearly.
    • triggers an event named changed-to-yearly in WMDEBannerEvents.
    • hides the modal overlay.
    • scrolls the viewport to the position of the amount options.

Implementation details

• Use the multi step donation form component from wikipedia.de desktop banners, but apply different styles, add events.
• Use the payment type fix for Sofortüberweisung created for mobile-de-05 (hook use_disabled_form_values).
• Make sure that the submit event is not logged in both schemas.
• The submit events fired should replace the current firing of the submit event.
• The changed-to-yearly event is not a submit event.