Update donation blocked naming consistency and add docs. (#797)

Author: MelissaAutumn

assets/js/common/donation-notice.js

@@ -61,7 +61,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const donationButtons = document.querySelectorAll('[data-donate-btn]');
   for (const donationButton of donationButtons) {
     // Any donation button that redirects should be skipped as that's not where the modal will show up.
-    if ('dontShowDonationNotice' in donationButton.dataset) {
+    // Ref: [data-dont-show-donation-blocked-notice]
+    if ('dontShowDonationBlockedNotice' in donationButton.dataset) {
       continue;
     }
     donationButton.addEventListener('click', () => {

docs/donation-blocked-notice.md

@@ -0,0 +1,16 @@
+# Donation Blocked Notice
+
+Controlled by: `settings.SHOW_DONATION_BLOCKED_NOTICE`.
+
+This feature checks to see if the user is on the Donate page, or if they've clicked on a donate button (determined by
+`[data-donate-btn]` attribute except for inclusion of `[data-dont-show-donation-blocked-notice]`.) If this check fails a
+medium-sized banner will appear the bottom of the screen notifying the user that they have an extension or browser that 
+is blocking Fundraise Up. 
+
+This check is done in `assets/js/common/donation-notice.js`, and simply sees if the user is on the Donate page and for 
+the existence of the embed donation form widget, or more commonly if they've clicked on a donation button and we don't 
+receive a Fundraise Up `checkoutOpen` event within 7.5 seconds.
+
+Important to note that if someone's internet is so slow that the checkout modal doesn't load and send that 
+`checkoutOpen` event within the 7.5 seconds the notice will still show up. However, it will auto-close once we receive 
+that event.

sites/updates.thunderbird.net/includes/macros/donate-button.html

@@ -1,5 +1,5 @@
-{% macro donate_button(form_id=settings.FRU_FORM_IDS['support'], content='cta', source='thunderbird-client', campaign='appeal', base_url=None, disable_notice=False) %}
-<a href="{{ donate_url(content=content, campaign=campaign, source=source, form_id=form_id, base_url=base_url) }}" class="donate-banner" {% if base_url != None %}target="_blank"{% endif %} data-donate-btn {% if disable_notice %}data-dont-show-donation-notice{% endif %}>
+{% macro donate_button(form_id=settings.FRU_FORM_IDS['support'], content='cta', source='thunderbird-client', campaign='appeal', base_url=None, disable_donation_blocked_notice=False) %}
+<a href="{{ donate_url(content=content, campaign=campaign, source=source, form_id=form_id, base_url=base_url) }}" class="donate-banner" {% if base_url != None %}target="_blank"{% endif %} data-donate-btn {% if disable_donation_blocked_notice %}data-dont-show-donation-blocked-notice{% endif %}>
   <div id="donate-banner-left">
     {{ _('Click here to <b>Donate!</b>') }}
   </div>

sites/updates.thunderbird.net/thunderbird/128.0/apr25/donate/index.html

@@ -12,7 +12,7 @@
 {% set utm_campaign = 'apr25_appeal' %}
 {% set donation_base_url = None %}
 {# We want to show the redirect notice here as this is where the modal will actually open up. #}
-{% set disable_donation_notice_banner = False %}
+{% set disable_donation_blocked_notice = False %}
 
 
 {# Just include previous page instead of duplicating it all #}

sites/updates.thunderbird.net/thunderbird/128.0/apr25/index.html

@@ -16,7 +16,7 @@
 {% set utm_source = utm_source|default('thunderbird-client') %}
 {% set donation_base_url = donation_base_url|default(url('updates.128.appeal.apr25.donate')) %}
 {# Disable the donation banner on this redirect page, we set this to false in the actual donation page. #}
-{% set disable_donation_notice_banner = disable_donation_notice_banner|default(True) %}
+{% set disable_donation_blocked_notice = disable_donation_blocked_notice|default(True) %}
 
 {% extends "includes/base/base.html" %}
 {% from 'includes/macros/donate-button.html' import donate_button with context %}
@@ -42,7 +42,7 @@ <h1 id="appeal-heading" aria-label="{{ _('Only 3% of users support Thunderbird.'
 {% endblock %}
 {% block content %}
   <section id="donate-button-container">
-    {{ donate_button(form_id=fru_form_id, campaign=utm_campaign, source=utm_source, base_url=donation_base_url, disable_notice=disable_donation_notice_banner) }}
+    {{ donate_button(form_id=fru_form_id, campaign=utm_campaign, source=utm_source, base_url=donation_base_url, disable_donation_blocked_notice=disable_donation_blocked_notice) }}
   </section>
   <section id="appeal-body">
     <div class="letter-container font-xl">