Add download CTA for fr and de /features/private/ page (#14440)

* added download cta for french and german pages * updated CTA to be same as footer * JS fixes
mozilla · Apr 16, 2024 · 75d3291 · 75d3291
1 parent 69baed8
commit 75d3291
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/bedrock/firefox/templates/firefox/features/private.html b/bedrock/firefox/templates/firefox/features/private.html
@@ -16,6 +16,13 @@
 <p>{{ ftl('features-private-firefox-also-protects-your', url='https://support.mozilla.org/kb/enhanced-tracking-protection-firefox-desktop?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features') }}</p>
 <p>{{ ftl('features-private-sidenote-we-are-not-big-tech') }}</p>
 
+{% if LANG in ['fr', 'de'] %}
+  <div class="c-firefox-midpage-cta">
+    <h3>{{ ftl('features-shared-footer-cta-title') }}</h3>
+    {{ download_firefox_thanks(alt_copy=ftl('download-button-download-firefox'), dom_id='features-midpage-download', button_class='mzp-t-product mzp-t-lg', download_location='primary') }}
+  </div>
+{% endif %}
+
 <h2>{{ ftl('features-private-what-information-does-firefox') }}</h2>
 <p>{{ ftl('features-private-mozilla-the-maker-of-firefox', url=url('firefox.privacy.index')) }}</p>
 <p>{{ ftl('features-private-read-firefoxs-privacy-notice', url=url('privacy.notices.firefox')) }}</p>

diff --git a/media/css/firefox/features/article.scss b/media/css/firefox/features/article.scss
@@ -87,3 +87,8 @@ $image-path: '/media/protocol/img';
         }
     }
 }
+
+.c-firefox-midpage-cta {
+    text-align: center;
+    margin-top: $spacing-2xl;
+}
diff --git a/media/js/firefox/features/features-article.es6.js b/media/js/firefox/features/features-article.es6.js
@@ -6,13 +6,12 @@
 
 const client = Mozilla.Client;
 const footerCta = document.querySelector('.c-feature-footer');
+const midPageCta = document.querySelector('.c-firefox-midpage-cta');
 
-(function () {
-    if (
-        (footerCta && client.isFirefoxDesktop) ||
-        (footerCta && client.isFirefoxAndroid) ||
-        (footerCta && client.isFirefoxiOS)
-    ) {
-        footerCta.parentNode.removeChild(footerCta);
-    }
-})(window.Mozilla);
+if (midPageCta && client.isFirefox) {
+    midPageCta.parentNode.removeChild(midPageCta);
+}
+
+if (footerCta && client.isFirefox) {
+    footerCta.parentNode.removeChild(footerCta);
+}