Add localized Microsoft Store badge / button (Fixes mozilla#14738)

bedrock/base/templates/macros.html

@@ -66,6 +66,13 @@
 </a>
 {%- endmacro %}
 
+{% macro ms_store_button(class_name='', extra_data_attributes={}, extra_img_attributes={}, href=settings.MICROSOFT_WINDOWS_STORE_FIREFOX_LINK, id='', product='Firefox', campaign='', target='') -%}
+{% set optional_img_attributes = {'width': '152', 'height': '55'} %}
+<a class="ga-product-download {{ class_name }}"{% if id %} id="{{ id }}"{% endif %}{% if target %} target="{{ target }}" rel="external noopener noreferrer"{% else %} rel="external"{% endif %} href="{{ href }}"{% for attr, val in extra_data_attributes.items() %} data-{{ attr }}="{{ val }}"{% endfor %}>
+  <img src="{{ l10n_img('firefox/windows/ms-store-badge.svg') }}" alt="{{ ftl('download-button-get-it-from-microsoft') }}"{% for attr, val in optional_img_attributes.items() %} {{ attr }}="{{ val }}"{% endfor %}>
+</a>
+{%- endmacro %}
+
 {# Docs: https://bedrock.readthedocs.io/en/latest/firefox-accounts.html#signup-form #}
 {% macro fxa_email_form(entrypoint, entrypoint_experiment, entrypoint_variation, context=None, utm_campaign=None, utm_content=None, utm_term=None, style=None, class_name='fxa-email-form', form_title=None, intro_text=none, button_text=None, button_class='mzp-c-button mzp-t-product') -%}
   <form action="{{ settings.FXA_ENDPOINT }}" id="fxa-email-form" class="mzp-c-form {{ class_name }}" data-test-id="fxa-form">

bedrock/mozorg/templatetags/misc.py

@@ -22,7 +22,7 @@
 from markupsafe import Markup
 from product_details import product_details
 
-from bedrock.base.templatetags.helpers import static
+from bedrock.base.templatetags.helpers import static, urlparams
 
 ALL_FX_PLATFORMS = ("windows", "linux", "mac", "android", "ios")
 
@@ -628,6 +628,19 @@ def play_store_url(ctx, product, campaign=None):
     return base_url
 
 
+@library.global_function
+@jinja2.pass_context
+def ms_store_url(ctx, product, mode="direct", campaign=None):
+    """Returns a Microsoft Windows Store URL for a given product"""
+    base_url = getattr(settings, f"MICROSOFT_WINDOWS_STORE_{product.upper()}_LINK")
+    params = {
+        "mode": mode,
+        "cid": campaign,
+    }
+
+    return urlparams(base_url, **params)
+
+
 @library.global_function
 @jinja2.pass_context
 def lang_short(ctx):

bedrock/mozorg/tests/test_helper_misc.py

@@ -863,6 +863,38 @@ def test_pocket_play_store_url_localized_campaign(self):
         )
 
 
+class TestMSStoreURL(TestCase):
+    rf = RequestFactory()
+
+    def _render(self, product, mode="direct", campaign=None):
+        req = self.rf.get("/")
+        campaign_param = f"'{campaign}'" if campaign is not None else campaign
+        return render(
+            f"{{{{ ms_store_url('{product}', '{mode}', {campaign_param}) }}}}",
+            {"request": req},
+        )
+
+    def test_firefox_release_ms_store_url(self):
+        """should return a MS Store URL for Firefox release channel"""
+        assert self._render(product="firefox") == "https://apps.microsoft.com/detail/9nzvdkpmr9rd?mode=direct"
+
+    def test_firefox_beta_ms_store_url(self):
+        """should return a MS Store URL for Firefox Beta channel"""
+        assert self._render(product="firefox_beta") == "https://apps.microsoft.com/detail/9nzw26frndln?mode=direct"
+
+    def test_firefox_ms_store_url_launch_mode(self):
+        """should return a MS Store URL including different launch mode parameters"""
+        assert self._render(product="firefox", mode="full") == "https://apps.microsoft.com/detail/9nzvdkpmr9rd?mode=full"
+        assert self._render(product="firefox", mode="mini") == "https://apps.microsoft.com/detail/9nzvdkpmr9rd?mode=mini"
+
+    def test_firefox_ms_store_url_campaign(self):
+        """should return a MS Store URL including campaign parameters"""
+        assert (
+            self._render(product="firefox", campaign="mozorg-firefox-home")
+            == "https://apps.microsoft.com/detail/9nzvdkpmr9rd?mode=direct&cid=mozorg-firefox-home"
+        )
+
+
 class TestLangShort(TestCase):
     rf = RequestFactory()
 

bedrock/settings/appstores.py

@@ -105,3 +105,9 @@
 
 # Link to Firefox Send on the Google Play Store.
 GOOGLE_PLAY_FIREFOX_SEND_LINK = "https://play.google.com/store/apps/details?id=org.mozilla.firefoxsend"
+
+# Link to Firefox on the Microsoft Windows Store.
+MICROSOFT_WINDOWS_STORE_FIREFOX_LINK = "https://apps.microsoft.com/detail/9nzvdkpmr9rd"
+
+# Link to Firefox Beta on the Microsoft Windows Store.
+MICROSOFT_WINDOWS_STORE_FIREFOX_BETA_LINK = "https://apps.microsoft.com/detail/9nzw26frndln"

bedrock/settings/base.py

@@ -1030,6 +1030,8 @@ def _is_bedrock_custom_app(app_name):
     GOOGLE_PLAY_FOCUS_LINK,
     GOOGLE_PLAY_KLAR_LINK,
     GOOGLE_PLAY_POCKET_LINK,
+    MICROSOFT_WINDOWS_STORE_FIREFOX_BETA_LINK,
+    MICROSOFT_WINDOWS_STORE_FIREFOX_LINK,
 )
 
 # Locales that should display the 'Send to Device' widget

l10n/en/download_button.ftl

@@ -71,3 +71,6 @@ download-button-linux-64-v2 = Download for Linux 64-bit
 #   $attrs (attrs) - link to https://support.mozilla.org/kb/install-firefox-linux#w_install-firefox-deb-package-for-debian-based-distributions
 # Note: Debian and Ubuntu are brand names and shouldn't be translated
 download-button-using-debian = Using Debian, Ubuntu or any Debian-based distribution?<br> You can set up our <a { $attrs }>APT repository instead</a>.
+
+# Microsoft Windows Store badge
+download-button-get-it-from-microsoft = Get it from Microsoft