Add Mofo 2023 fundraising banner (Fixes mozilla#13880) (mozilla#13882)

bedrock/base/templates/includes/banners/basic.html

@@ -0,0 +1,11 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
+<aside class="c-banner hide-from-legacy-ie {% block banner_class %}{% endblock %}" id="{% block banner_id %}{% endblock %}" data-nosnippet="true">
+  <button type="button" class="c-banner-close"><span>{{ ftl('ui-close') }}</span></button>
+  {% block banner_content %}{% endblock%}
+</aside>

bedrock/base/templates/includes/banners/fundraiser.html

@@ -4,33 +4,43 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends 'includes/banners/base.html' %}
+{% extends 'includes/banners/basic.html' %}
 
 {% block banner_id %}fundraising-banner{% endblock %}
 
-{% block banner_title %}{{ ftl('banner-fundraising-title-v2', fallback='banner-fundraising-title') }}{% endblock %}
+{% block banner_class %}c-banner-fundraising{% endblock %}
 
 {% block banner_content %}
-  {% if ftl_has_messages('banner-fundraising-body-v2', 'banner-fundraising-body-extra') %}
-    <p>{{ ftl('banner-fundraising-body-v2') }}</p>
-    <p>{{ ftl('banner-fundraising-body-extra') }}</p>
-  {% else %}
-    <p>{{ ftl('banner-fundraising-body') }}</p>
-  {% endif %}
+  {% call split(
+    block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace',
+    image=resp_img(
+      url='img/banners/fundraising/loading-800.png',
+      srcset={
+        'img/banners/fundraising/loading-600.png': '600w',
+        'img/banners/fundraising/loading-800.png': '800w',
+        'img/banners/fundraising/loading-1000.png': '1000w',
+        'img/banners/fundraising/loading-1200.png': '1200w',
+        'img/banners/fundraising/loading-1400.png': '1400w',
+      },
+      sizes={
+        '(min-width: 1600px)': '680px',
+        '(min-width: 768px)': '50vw',
+        'default': '100vw'
+      },
+      optional_attributes={
+        'height': '355',
+        'width': '680',
+        'class': 'c-banner-media mzp-c-split-media-asset'
+      }
+    ),
+    media_after=False
+  ) %}
+    <h2 class="c-banner-title">{{ ftl('banner-fundraising-giving-tuesday-title') }}</h2>
 
-  <form id="fundraiser-form" class="c-fundraiser-form" method="get" action="https://foundation.mozilla.org/">
-    <div class="c-fundraiser-submit">
-      <button type="submit" class="mzp-c-button mzp-t-product mzp-t-lg">{{ ftl('banner-fundraising-donate') }}</button>
-    </div>
+    <p class="c-banner-tagline">{{ ftl('banner-fundraising-giving-tuesday-tagline') }}</p>
 
-    {# Referral params #}
-    <input type="hidden" name="form" value="donate">
-    <input type="hidden" name="c_id" value="7014x000000eQOH">
-    <input type="hidden" name="ref" value="moco">
-    <input type="hidden" name="utm_campaign" value="moco">
-    <input type="hidden" name="utm_source" value="mozilla.org">
-    <input type="hidden" name="utm_medium" value="referral">
-    <input type="hidden" name="utm_content" value="giving2022banner">
+    {% set donate_url = "https://foundation.mozilla.org/?form=eoy-banner&utm_medium=web&utm_source=eoy-banner&utm_campaign=23-EOYB-B1&utm_content=button_donate&utm_term=" + lang_short() %}
 
-  </form>
+    <a class="c-banner-button mzp-c-button mzp-t-product mzp-t-xl" href="{{ donate_url }}">{{ ftl('banner-fundraising-donate') }}</a>
+  {% endcall %}
 {% endblock %}

bedrock/mozorg/templates/mozorg/home/home-new.html

@@ -22,7 +22,7 @@
 
 {% block page_desc %}{{ ftl('home-did-you-know-mozilla-the-maker') }}{% endblock %}
 
-{% set show_fundraising_banner = switch('fundraising-banner-giving2022') and ftl_has_messages('banner-fundraising-title', 'banner-fundraising-body') %}
+{% set show_fundraising_banner = switch('fundraising-banner-giving2023') and ftl_has_messages('banner-fundraising-giving-tuesday-title', 'banner-fundraising-giving-tuesday-tagline') %}
 {% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
 
 {% block page_css %}

bedrock/mozorg/templates/mozorg/home/home-old.html

@@ -13,7 +13,7 @@
 
 {% set referrals="?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=homepage" %}
 
-{% set show_fundraising_banner = switch('fundraising-banner-giving2022') and ftl_has_messages('banner-fundraising-title', 'banner-fundraising-body') %}
+{% set show_fundraising_banner = switch('fundraising-banner-giving2023') and ftl_has_messages('banner-fundraising-giving-tuesday-title', 'banner-fundraising-giving-tuesday-tagline') %}
 
 {% block page_css %}
   {{ css_bundle('protocol-split') }}

bedrock/mozorg/views.py

@@ -130,7 +130,9 @@ class HomeView(VariationTemplateView):
     ftl_files_map = {old_template_name: ["mozorg/home"], template_name: ["mozorg/home-new"]}
 
     def get_template_names(self):
-        if ftl_file_is_active("mozorg/home-new"):
+        experience = self.request.GET.get("xv", None)
+
+        if ftl_file_is_active("mozorg/home-new") and experience != "legacy":
             return [self.template_name]
 
         return [self.old_template_name]

l10n/en/banners/fundraising.ftl

@@ -4,25 +4,17 @@
 
 ### URL: https://www-dev.allizom.org/
 
-banner-fundraising-title-v2 = Help { -brand-name-mozilla } fight for a better internet this holiday season.
+# Giving Tuesday is a global day of generosity where people are inspired to give, collaborate, share and donate.
+banner-fundraising-giving-tuesday-title = Donate to { -brand-name-mozilla } for Giving Tuesday
+banner-fundraising-giving-tuesday-tagline = It’s time to reclaim the internet from big tech. Can you donate to { -brand-name-mozilla } for Giving Tuesday?
 
-banner-fundraising-title-giving-day = Help { -brand-name-mozilla } fight for a better internet this Giving Tuesday.
+banner-fundraising-title-1 = Donate to { -brand-name-mozilla }. Reclaim the internet.
+banner-fundraising-tagline-1 = It’s time to take the internet back from big tech. Can you donate to { -brand-name-mozilla }?
 
-# Obsolete string
-banner-fundraising-title = The future is being decided online. Help { -brand-name-mozilla } fight for a web for all of us.
+banner-fundraising-title-2 = Take back control of the internet.
+banner-fundraising-tagline-2 = People are no longer in control online. Big tech is. Donate to { -brand-name-mozilla } and reclaim the internet.
 
-banner-fundraising-body-v2 = We’re proudly nonprofit, working to keep the web healthy. Your contributions help build a safe and open internet.
+banner-fundraising-title-3 = Can you donate to { -brand-name-mozilla }?
+banner-fundraising-tagline-3 = { -brand-name-mozilla } always puts people over profits. Donate to { -brand-name-mozilla } and help keep the internet healthy.
 
-# Obsolete string
-banner-fundraising-body = Our personal data is collected every time we access the web, and it’s not easy to find out what happens with it. Misinformation is making it harder for us to find the truth. Web-connected devices are pushed to market without meeting minimum security standards. The non-profit { -brand-name-mozilla-foundation } fights to make the internet safe, open and accessible to all. <strong>Will you donate today?</strong>
-
-banner-fundraising-body-extra = Can you donate today?
-banner-fundraising-monthly = Monthly
-banner-fundraising-one-time = One-time
 banner-fundraising-donate = Donate
-
-# Obsolete string
-# Variables:
-#   $amount (number) - Inserts a number in US dollars, e.g. '$50'. Adapt the string in your translation for your locale conventions if needed, ex: { $amount } US$
-# Some other currencies are available. Check the currency dropdown at https://donate.mozilla.org and if your currency is available you should adapt the string with the correct symbol, e.g. '€{ $amount }' for Euro or '{ $amount } zł' for Polish złoty
-banner-fundraising-amount = ${ $amount }

media/css/base/banners/fundraiser.scss

@@ -6,97 +6,53 @@ $font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import 'includes/base';
-
-.c-banner {
-    background: $color-white url('/media/img/banners/fundraising/giving.jpg') right top no-repeat;
-    @include at2x('/media/img/banners/fundraising/giving.jpg');
-    @include background-size(cover);
-    color: $color-black;
-
-    // this is needed here and below, as the high-res media query
-    // created by the at2x mixin needs overriding as well.
-    // see https://github.com/mozilla/protocol/issues/751
-    @media #{$mq-high-res} {
-        @include background-size(cover);
+@import 'includes/basic';
+
+.c-banner-fundraising {
+    background: $color-red-50;
+    color: $color-white;
+
+    .c-banner-title {
+        @include bidi(((padding, 0 $spacing-sm 0 0, 0 0 0 $spacing-sm),));
+        @include text-title-lg;
+        color: $color-white;
+        display: block;
+        width: auto;
     }
 
-    @media #{$mq-lg} {
-        @include background-size(contain);
-        background-position: right $spacing-lg top;
-
-        @media #{$mq-high-res} {
-            @include background-size(contain);
-        }
+    .c-banner-tagline {
+        font-weight: bold;
     }
 
-    // right-to-left locales get a reversed image.
-    html[dir='rtl'] & {
-        @include at2x('/media/img/banners/fundraising/giving-rtl.jpg');
-        @include background-size(cover);
-        background-position: left top;
+    .c-banner-media {
+        margin: 0 auto;
+        max-width: 255px;
+    }
 
-        @media #{$mq-lg} {
-            @include background-size(contain);
-            background-position: left $spacing-lg top;
+    .c-banner-button {
+        @include text-body-lg;
+        margin: 0;
 
-            @media #{$mq-high-res} {
-                @include background-size(contain);
-            }
+        &::after {
+            @include bidi(((content, ' →', '← '),));
         }
     }
-}
-
-.c-banner-inner {
-    margin: -$spacing-md auto;
-}
-
-.c-banner-main {
-    backdrop-filter: blur(5px);
-    background: rgba($color-white, 0.7);
-    display: block;
-    padding: $spacing-md $spacing-xl;
 
-    @media #{$mq-lg} {
-        max-width: 50%;
+    .c-banner-close {
+        background-image: url('#{$image-path}/icons/close-white.svg');
     }
-}
-
-.c-banner-title {
-    @include text-title-xs;
-    @include bidi(((padding, 0 $spacing-sm 0 0, 0 0 0 $spacing-sm),));
-    display: block;
-    font-weight: normal;
-    line-height: 1.25em;
-    width: auto;
 
-    html[lang^='en'] & {
-        @include text-title-sm;
-    }
-}
-
-.c-banner-content {
-    padding: 0;
-
-    p {
-        @include text-body-md;
+    @media #{$mq-md} {
+        .c-banner-media {
+            max-width: 100%;
+        }
     }
-}
 
-.c-fundraiser-submit .mzp-c-button {
-    @include text-body-lg;
-    margin: 0;
-}
-
-@supports (display: grid) {
-    .c-fundraiser-submit .mzp-c-button {
-        width: 100%;
+    @media #{$mq-lg} {
+        .mzp-c-split-body {
+            html[lang^='en'] & {
+                max-width: 34em;
+            }
+        }
     }
 }
-
-// Close button
-.c-banner-close {
-    @include bidi(((right, $spacing-lg, auto), (left, auto, $spacing-lg),));
-    background-image: url('#{$image-path}/icons/close.svg');
-    top: $spacing-lg;
-}

media/css/base/banners/includes/_basic.scss

@@ -0,0 +1,72 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/protocol/fonts';
+$image-path: '/media/protocol/img';
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+
+.c-banner {
+    @include clearfix;
+    padding: $spacing-lg 0;
+    position: relative;
+    z-index: 3;
+
+    // hide by default if JS is available to avoid flicker
+    // (if visitor previously dismissed)
+    .js & {
+        display: none;
+    }
+
+    // conditional class used to display the banner.
+    &.c-banner-is-visible {
+        display: block;
+    }
+}
+
+.c-banner-title {
+    @include text-title-lg;
+}
+
+.c-banner-tagline {
+    @include text-body-xl;
+}
+
+// Close button
+.c-banner-close {
+    @include background-size(20px 20px);
+    @include bidi(((right, $spacing-sm, auto), (left, auto, $spacing-sm)));
+    @include image-replaced;
+    background: transparent url('#{$image-path}/icons/close.svg') center center no-repeat;
+    border: none;
+    cursor: pointer;
+    display: none;
+    height: 42px;
+    min-width: 0;
+    padding: 0;
+    position: absolute;
+    top: $spacing-sm;
+    width: 42px;
+    z-index: 1;
+
+    &:hover,
+    &:focus {
+        @include transition(transform 0.1s ease-in-out);
+        @include transform(scale(1.1));
+    }
+
+    &:focus {
+        outline: 1px dotted $color-white;
+    }
+
+    // hide the 'Close' text
+    span {
+        @include visually-hidden;
+    }
+
+    // only display when JS is available
+    .js & {
+        display: block;
+    }
+}

media/js/mozorg/home/banner-init.js

@@ -8,7 +8,7 @@
     'use strict';
 
     function onLoad() {
-        window.Mozilla.Banner.init('fundraising-banner', true);
+        window.Mozilla.Banner.init('fundraising-banner');
     }
 
     window.Mozilla.run(onLoad);