search

MozillaFoundation / donate-wagtail

[Legacy] - Wagtail based donation stack
Mozilla Public License 2.0
43 stars 22 forks source link

FundraiseUp form update MVP #1740

Closed danielfmiranda closed 1 year ago

danielfmiranda commented 1 year ago

Description:

Related PRs/issues: https://github.com/MozillaFoundation/foundation.mozilla.org/issues/10261

This PR updates the donate stack pages to use the javascript rendered FRU donation form.

This was done by using template overrides, so if we ever need to go back to our HTML form we can do so easily!

This PR also removes the logo_showcase block from all templates, per request of our stakeholders.

Steps to test:

  1. Check this branch out
  2. Run inv new-db
  3. Take a look at http://localhost:8000/, and confirm that the landing page looks as expected.
  4. Take a look at http://localhost:8000/campaign, and confirm that the campaign page looks as expected.
  5. If you would like to test donations on either of these pages, append ?fundraiseupLivemode=no to the URL!
  6. If everything is looking as expected, testing is complete. Thank you! 🙌

Landing Page Screenshots:

Landing Page Desktop: Screenshot 2023-03-17 at 15-07-51 Donate today Donate to Mozilla

Landing Page Tablet:

Landing Page Mobile:

Campaign Page Screenshots:

Campaign Page Desktop: Screenshot 2023-03-16 at 17-18-35 It's Pi Day! Donate to Mozilla

Campaign Page Tablet:

Campaign Page Mobile:

danielfmiranda commented 1 year ago

Hi @nancyt1 @kristinashu!

Wanted to leave a heads up that during the Design Crit meeting today, Rebecca and Sabrina gave me some feedback regarding moving the "Donate Now" heading. I have left a comment in the figma file as well.

Thanks!

kristinashu commented 1 year ago

Thank you @danielfmiranda! This is looking good and better than I expected! I approve of this as an MVP.

Not blockers but it would be nice if:

1) The Mozilla logos were left aligned with the rest of the content. Ideally it is either exactly aligned or very much not aligned but as is, in the screen cap, it is almost aligned. (screen cap from above to show slightly off alignment)

225782292-45b28e03-4cd6-4b5e-95ff-336f9f0692ea

2) I think the full Mozilla logo would fix ok at this width. 225782306-38f132c9-bedb-41df-b1b4-deacf547e5b2

Sorry it these are things you raised during crit while I wasn't there. But again, there's are nice to haves and I'm also ok to approve this and wait to see what Nancy thinks would be good as follow ups.

danielfmiranda commented 1 year ago

Thanks for the feedback @kristinashu!

I have updated the PR to reflect your requests. Here are some screenshots:

Lining up the content with the navbar logo: Screenshot 2023-03-17 at 14-22-31 Donate today Donate to Mozilla

Navbar logo at tablet width:

danielfmiranda commented 1 year ago

Thanks for the review and suggestion @mmmavis! I have implemented your feedback, and left a response to a couple of your comments.

This pr is now ready for re-review whenever you have a free moment. Thanks! 🙌

kristinashu commented 1 year ago

w00t thank you Daniel! It's looking really good!

danielfmiranda commented 1 year ago

Hi @mmmavis thanks for the review and great suggestions! I have updated the PR based on your feedback and it is now ready for re-review whenever you have a free moment