Remove references to Lockwise, replace with VPN [fix #10166]

mozilla · Jun 21, 2021 · 575a9fb · 575a9fb
1 parent 2748b6a
commit 575a9fb
Show file tree

Hide file tree

Showing 23 changed files with 293 additions and 117 deletions.
diff --git a/bedrock/base/templates/includes/sticky-promo.html b/bedrock/base/templates/includes/sticky-promo.html
@@ -22,10 +22,6 @@ <h3 class="mzp-c-sticky-promo-title">{{ ftl('firefox-sticky-promo-meet-our-famil
             <img src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" width="32" height="32" alt="">
             {{ ftl('firefox-sticky-promo-monitor') }}
           </a>
-          <a data-link-name="Lockwise" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" rel="" href="{{ url('firefox.products.lockwise') }}{{ promo_referrals }}">
-            <img src="{{ static('protocol/img/logos/firefox/lockwise/logo.svg') }}" width="32" height="32" alt="">
-            {{ ftl('firefox-sticky-promo-lockwise') }}
-          </a>
           <a data-link-name="Pocket" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" rel="external noopener" href="https://getpocket.com/{{ referral|safe }}{{ promo_referrals }}">
             <img src="{{ static('protocol/img/logos/pocket/logo.svg') }}" width="32" height="29" alt="">
             {{ ftl('firefox-sticky-promo-pocket') }}

diff --git a/bedrock/firefox/templates/firefox/accounts.html b/bedrock/firefox/templates/firefox/accounts.html
@@ -123,19 +123,21 @@ <h2 class="c-section-title">
       {% endif %}
     </h2>
 
-    <ul class="c-product-list l-columns-three">
+    <ul class="c-product-list {% if ftl_has_messages('firefox-accounts-protection-for-your-whole') %}l-columns-three{% else %}l-columns-two{% endif %}">
       <li class="c-product-list-item t-product-firefox">
         <a href="{{ url('firefox.new') }}">
           <h3 class="c-product-list-title">{{ ftl('firefox-accounts-firefox-browser') }}</h3>
           <p class="c-product-list-desc">{{ ftl('firefox-accounts-travel-the-internet') }}</p>
         </a>
       </li>
-      <li class="c-product-list-item t-product-lockwise">
-        <a href="{{ url('firefox.products.lockwise') }}" data-cta-text="Firefox Lockwise" data-cta-type="fxa-lockwise">
-          <h3 class="c-product-list-title">{{ ftl('firefox-accounts-firefox-lockwise') }}</h3>
-          <p class="c-product-list-desc">{{ ftl('firefox-accounts-keep-your-passwords') }}</p>
+    {% if ftl_has_messages('firefox-accounts-whole-device-protection') %}
+      <li class="c-product-list-item t-product-vpn">
+        <a href="{{ url('products.vpn.landing') }}" data-cta-text="Mozilla VPN" data-cta-type="fxa-vpn">
+          <h3 class="c-product-list-title">{{ ftl('firefox-accounts-mozilla-vpn') }}</h3>
+          <p class="c-product-list-desc">{{ ftl('firefox-accounts-whole-device-protection') }}</p>
         </a>
       </li>
+    {% endif %}
       <li class="c-product-list-item t-product-monitor">
         <a href="https://monitor.firefox.com?utm_source={{ _utm_source }}&amp;utm_medium=referral&amp;utm_campaign={{ _utm_campaign }}&amp;utm_content=product-list-item&amp;entrypoint={{ _entrypoint }}" data-cta-text="Firefox Monitor" data-cta-type="FxA-Monitor">
           <h3 class="c-product-list-title">{{ ftl('firefox-accounts-firefox-monitor') }}</h3>

diff --git a/bedrock/firefox/templates/firefox/home/index-master.html b/bedrock/firefox/templates/firefox/home/index-master.html
@@ -102,11 +102,11 @@ <h2 class="c-showcase-title">{{ ftl('firefox-home-meet-our-family-of') }}</h2>
             </a>
           </li>
           <li>
-              <a class="mzp-c-cta-link" href="{{ url('firefox.products.lockwise') }}" rel="external noopener" data-cta-type="link" data-cta-text="Lockwise">
-                <img alt="" src="{{ static('protocol/img/logos/firefox/lockwise/logo-md.png') }}" height="40" width="40"><br>
-                {{ ftl('firefox-home-lockwise') }}
-              </a>
-            </li>
+            <a class="mzp-c-cta-link" href="{{ url('products.vpn.landing') }}" data-cta-type="link" data-cta-text="Mozilla VPN">
+              <img alt="" src="{{ static('protocol/img/logos/mozilla/vpn/logo.svg') }}" height="40" width="40"><br>
+              {{ ftl('firefox-home-mozilla-vpn') }}
+            </a>
+          </li>
           <li>
             <a class="mzp-c-cta-link" href="https://getpocket.com/firefox_learnmore/{{ referrals }}" rel="external noopener" data-cta-type="link" data-cta-text="Pocket">
               <img alt="" src="{{ static('img/logos/pocket/logo.svg') }}" height="40" width="40"><br>
@@ -163,26 +163,21 @@ <h4>{{ ftl('firefox-home-know-when-hackers-strike') }}</h4>
       {% endcall %}
     </div>
 
+  {% if ftl_has_messages('firefox-home-protection-for-your-whole') %}
     <div class="mzp-l-content">
       {% call feature_card(
-        title=ftl('firefox-home-firefox-lockwise'),
+        title=ftl('firefox-home-mozilla-vpn'),
         heading_level=3,
-        image_url='img/firefox/home/master/lockwise.svg',
-        class='mzp-l-card-feature-left-half t-lockwise',
-        ga_title='Lockwise',
+        image_url='img/firefox/home/master/vpn.svg',
+        class='mzp-l-card-feature-left-half t-mozvpn',
+        ga_title='Mozilla VPN',
         media_after=True
       ) %}
-      <h4>{{ ftl('firefox-home-keep-your-passwords') }}</h4>
-        <div class="mzp-c-menu-list mzp-t-cta mzp-t-download">
-          <h5 class="mzp-c-menu-list-title">{{ ftl('firefox-home-download-the-app') }}</h5>
-          <ul class="mzp-c-menu-list-list" id="menu-lockwise">
-            <li class="mzp-c-menu-list-item"><a href="{{ lockwise_adjust_url('android', 'firefox-home') }}" rel="external noopener" data-cta-type="link" data-cta-text="Download Lockwise for Android"> {{ ftl('firefox-home-android') }}</a></li>
-            <li class="mzp-c-menu-list-item"><a href="{{ lockwise_adjust_url('ios', 'firefox-home') }}" rel="external noopener" data-cta-type="link" data-cta-text="Download Lockwise for iOS">{{ ftl('firefox-home-ios') }}</a></li>
-          </ul>
-        </div>
-        <p><a class="mzp-c-cta-link" href="{{ url('firefox.products.lockwise') }}" rel="external noopener" data-cta-type="link" data-cta-text="Lockwise Learn More">{{ ftl('firefox-home-learn-more-about-lockwise') }}</a></p>
+      <h4>{{ ftl('firefox-home-protection-for-your-whole') }}</h4>
+      <p><a class="mzp-c-cta-link" href="{{ url('products.vpn.landing') }}" data-cta-type="link" data-cta-text="Get Mozilla VPN">{{ ftl('firefox-home-get-mozilla-vpn') }}</a></p>
       {% endcall %}
     </div>
+  {% endif %}
 
     <div class="t-promise">
       <div class="mzp-l-content">

diff --git a/bedrock/firefox/templates/firefox/privacy/products.html b/bedrock/firefox/templates/firefox/privacy/products.html
@@ -113,25 +113,32 @@ <h3 class="privacy-products-hero-sub-title">
         </p>
       {% endcall %}
 
+    {% if ftl_has_messages('firefox-privacy-hub-surf-stream-and-get-work') %}
       {% call feature_card(
-        title=ftl('firefox-privacy-hub-firefox-lockwise'),
-        image_url='img/firefox/privacy/products/lockwise.svg',
-        class='privacy-products-lockwise has-logo mzp-l-card-feature-right-half',
+        title=ftl('firefox-privacy-hub-mozilla-vpn'),
+        image_url='img/firefox/privacy/products/vpn.svg',
+        class='privacy-products-vpn has-logo mzp-l-card-feature-right-half',
         media_after=True
       ) %}
-        <p>{{ ftl('firefox-privacy-hub-the-passwords-and-credentials') }}</p>
+        <p>{{ ftl('firefox-privacy-hub-surf-stream-and-get-work') }}</p>
         <p>
-          <a class="mzp-c-cta-link" href="{{ url('firefox.products.lockwise' )}}" data-cta-type="fxa-lockwise" data-cta-position="secondary">
-            {{ ftl('firefox-privacy-hub-learn-more-about-lockwise') }}
+          <a class="mzp-c-cta-link" href="{{ url('products.vpn.landing' )}}" data-cta-type="fxa-vpn" data-cta-position="secondary">
+            {{ ftl('firefox-privacy-hub-get-mozilla-vpn') }}
           </a>
         </p>
       {% endcall %}
+    {% endif %}
 
+    {% if ftl_has_messages('firefox-privacy-hub-protection-for-your-whole') %}
+    {% set class = 'privacy-products-pocket has-logo mzp-l-card-feature-left-half' %}
+    {% else %}
+    {% set class = 'privacy-products-pocket has-logo mzp-l-card-feature-right-half' %}
+    {% endif %}
       {% call feature_card(
         title=ftl('firefox-privacy-hub-pocket'),
         image_url='img/firefox/privacy/products/pocket.png',
         include_highres_image=True,
-        class='privacy-products-pocket has-logo mzp-l-card-feature-left-half',
+        class=class,
         media_after=True
       ) %}
         <p>{{ ftl('firefox-privacy-hub-pocket-recommends-high') }}</p>

diff --git a/bedrock/firefox/templates/firefox/products/index.html b/bedrock/firefox/templates/firefox/products/index.html
@@ -62,6 +62,7 @@ <h2 class="c-landing-grid-title"><a href="https://monitor.firefox.com{{ referral
         optional_attributes={'data-cta-text': 'Sign up for breach alerts', 'data-cta-type': 'fxa-monitor', 'data-cta-position': 'card'}
       ) }}</p>
     </div>
+
     <div class="c-landing-grid-item">
       {{ high_res_img('img/firefox/products/browsers.jpg', {'alt': '', 'class': 'c-landing-grid-img', 'width': '316', 'height': '223'}) }}
       <h2 class="c-landing-grid-title "><a class="mzp-c-cta-link" href="{{ url('firefox.browsers.index') }}" data-cta-type="link" data-cta-text="Firefox browsers">{{ ftl('firefox-products-firefox-browsers') }}</a></h2>
@@ -83,20 +84,16 @@ <h3 class="mzp-c-menu-list-title">{{ ftl('download-button-download') }}</h3>
       </div>
       <p><a class="mzp-c-cta-link" href="{{ url('firefox.browsers.index') }}" data-cta-type="link" data-cta-text="See all browsers">{{ ftl('firefox-products-see-all-browsers') }}</a></p>
     </div>
+
+  {% if ftl_has_messages('firefox-products-surf-stream-and-get-work-done') %}
     <div class="c-landing-grid-item">
-      <img src="{{ static('img/firefox/products/lockwise.svg') }}" class="c-landing-grid-img" alt="" width="316" height="223">
-      <h2 class="c-landing-grid-title"><a href="{{ url('firefox.products.lockwise') }}" data-cta-type="link" data-cta-text="Firefox Lockwise">{{ ftl('firefox-products-firefox-lockwise') }}</a></h2>
-      <p>{{ ftl('firefox-products-keep-your-passwords-safe-and') }}</p>
-      <div id="menu-lockwise-wrapper"  class="mzp-c-menu-list mzp-t-cta mzp-t-download">
-        <h3 class="mzp-c-menu-list-title">{{ ftl('firefox-products-download-lockwise') }}</h3>
-        <ul class="mzp-c-menu-list-list" id="menu-lockwise">
-          <li class="mzp-c-menu-list-item hidden" id="js-lockwise-desktop"><button class="c-menu-list-link" id="lockwise-button" data-cta-type="lockwise-open-in-fx" data-cta-position="card" type="button">{{ ftl('firefox-products-open-in-firefox') }}</button></li>
-          <li class="mzp-c-menu-list-item"><a href="{{ lockwise_adjust_url('android', 'firefox_products') }}" rel="external noopener" data-cta-type="link" data-cta-text="Download Lockwise Android">{{ ftl('firefox-products-android') }}</a></li>
-          <li class="mzp-c-menu-list-item"><a href="{{ lockwise_adjust_url('ios', 'firefox_products') }}" rel="external noopener" data-cta-type="link" data-cta-text="Download Lockwise iOS">{{ ftl('firefox-products-ios') }}</a></li>
-        </ul>
-      </div>
-      <p><a class="mzp-c-cta-link" href="{{ url('firefox.products.lockwise') }}" rel="external noopener" data-cta-type="link" data-cta-text="Lockwise Learn More">{{ ftl('firefox-products-learn-more-about-lockwise') }}</a></p>
+      <img src="{{ static('img/firefox/products/vpn.svg') }}" class="c-landing-grid-img" alt="" width="316" height="223">
+      <h2 class="c-landing-grid-title"><a href="{{ url('products.vpn.landing') }}" data-cta-type="link" data-cta-text="Mozilla VPN">{{ ftl('firefox-products-mozilla-vpn') }}</a></h2>
+      <p>{{ ftl('firefox-products-surf-stream-and-get-work-done') }}</p>
+      <p><a class="mzp-c-cta-link" href="{{ url('products.vpn.landing') }}" rel="external noopener" data-cta-type="link" data-cta-text="Get Mozilla VPN">{{ ftl('firefox-products-get-mozilla-vpn') }}</a></p>
     </div>
+  {% endif %}
+
     <div class="c-landing-grid-item">
       <img src="{{ static('img/firefox/products/pocket.svg') }}" class="c-landing-grid-img" alt="" width="316" height="223">
       <h2 class="c-landing-grid-title"><a href="https://getpocket.com/firefox_learnmore/{{ referrals }}">{{ ftl('firefox-products-pocket') }}</a></h2>

diff --git a/l10n/en/firefox/accounts.ftl b/l10n/en/firefox/accounts.ftl
@@ -35,13 +35,20 @@ firefox-accounts-meet-our-family-of = Meet our family of privacy-first products.
 firefox-accounts-firefox-is-technology = { -brand-name-firefox } is technology that fights for you.
 firefox-accounts-get-technology-that = Get technology that fights for you.
 firefox-accounts-travel-the-internet = Travel the internet with protection, on every device.
+
+# Obsolete string
 firefox-accounts-keep-your-passwords = Keep your passwords protected and portable.
 firefox-accounts-get-a-lookout-for = Get a lookout for data breaches.
+
+# Obsolete string
 firefox-accounts-share-large-files = Share large files without prying eyes.
 firefox-accounts-get-it-all-on-every = Get it all on every device, without feeling trapped in a single operating system.
 firefox-accounts-and-get-it-all-on = And get it all on every device, without feeling trapped in a single operating system.
 firefox-accounts-get-the-respect-you = Get the respect you deserve.
 
+firefox-accounts-mozilla-vpn = { -brand-name-mozilla-vpn }
+firefox-accounts-whole-device-protection = Whole-device protection on every device
+
 # Variables:
 #   $promise (url) - link to https://www.mozilla.org/firefox/privacy/
 firefox-accounts-youll-always-get-the = You’ll always get the truth from us. Everything we make and do honors our <a href="{ $promise }">Personal Data Promise</a>:
@@ -57,11 +64,15 @@ firefox-accounts-get-into-the-open = Get into the open source spirit by test-dri
 
 # "Big Tech" refers to large technology companies that dominate the web, such as Google and Facebook. Mozilla helps to keep these companies "in check" by challenging their dominance so they can't completely take over.
 firefox-accounts-help-us-keep-big-tech = Help us keep Big Tech in check.
+firefox-accounts-we-support-communities = We support communities all over the world standing up for a healthier internet. Add your voice to the fight.
 
 ## The strings below are visually hidden in the page and replaced by logo wordmark images. They are still important for a11y and SEO.
 
-firefox-accounts-we-support-communities = We support communities all over the world standing up for a healthier internet. Add your voice to the fight.
 firefox-accounts-firefox-browser = { -brand-name-firefox-browser }
+
+# Obsolete string
 firefox-accounts-firefox-lockwise = { -brand-name-firefox-lockwise }
 firefox-accounts-firefox-monitor = { -brand-name-firefox-monitor }
+
+# Obsolete string
 firefox-accounts-firefox-send = { -brand-name-firefox-send }
diff --git a/l10n/en/firefox/home.ftl b/l10n/en/firefox/home.ftl
@@ -11,17 +11,26 @@ firefox-home-meet-our-family-of = Meet our family of products
 firefox-home-get-trackers-off = Get 2,000+ trackers off your trail — including { -brand-name-facebook }
 firefox-home-know-when-hackers-strike = Know when hackers strike — and stay a step ahead
 firefox-home-start-getting-breach = Start getting breach reports
+
+# Obsolete string
 firefox-home-keep-your-passwords = Keep your passwords safe on every device
+
+# Obsolete string
 firefox-home-learn-more-about-lockwise = Learn more about { -brand-name-lockwise }
 
 # The strong tags around "respect" add a special underline. The underline breaks if it is on two words, so please omit the strong tags if they need to be around multiple words in your language.
 firefox-home-get-the-respect-you = Get the <strong>respect</strong> you deserve
 
 firefox-home-every-single-firefox = Every single { -brand-name-firefox } product honors our Personal Data Promise: <strong>Take less. Keep it safe. No secrets.</strong>
+
+# Obsolete string
 firefox-home-share-large-files-without = Share large files without prying eyes
+
+# Obsolete string
 firefox-home-start-sending-files = Start sending files safely
 firefox-home-trade-clickbait-for = Trade clickbait for quality content
 firefox-home-learn-more-about-pocket = Learn more about { -brand-name-pocket }
+firefox-home-protection-for-your-whole = Protection for your whole device, on every device.
 
 # The strong tags around "privacy" add a special underline. The underline breaks if it is on two words, so please omit the strong tags if they need to be around multiple words in your language.
 firefox-home-one-login-all-your = One login. All your devices. A family of products that respect your <strong>privacy</strong>.
@@ -32,6 +41,7 @@ firefox-home-get-the-browser-extension = Get the browser extension
 firefox-home-get-the-facebook-container = Get the { -brand-name-facebook-container } extension
 firefox-home-download-the-browser = Download the browser
 firefox-home-download-the-app = Download the app
+firefox-home-get-mozilla-vpn = Get { -brand-name-mozilla-vpn }
 firefox-home-desktop = Desktop
 firefox-home-browsers = Browsers
 firefox-home-android = { -brand-name-android }
@@ -41,10 +51,12 @@ firefox-home-lockwise = { -brand-name-lockwise }
 firefox-home-send = { -brand-name-send }
 firefox-home-mozilla = { -brand-name-mozilla }
 firefox-home-pocket = { -brand-name-pocket }
+firefox-home-mozilla-vpn = { -brand-name-mozilla-vpn }
 
 ## The strings below are visually hidden in the page and replaced by logo wordmark images. They are still important for a11y and SEO.
 
 firefox-home-firefox-browser = { -brand-name-firefox-browser }
 firefox-home-firefox-monitor = { -brand-name-firefox-monitor }
 firefox-home-firefox-lockwise = { -brand-name-firefox-lockwise }
 firefox-home-firefox-send = { -brand-name-firefox-send }
+
diff --git a/l10n/en/firefox/privacy-hub.ftl b/l10n/en/firefox/privacy-hub.ftl
@@ -101,3 +101,7 @@ firefox-privacy-hub-already-have-an-account = Already have an account? <a { $sig
 # Variables:
 #   $url (url) - link to https://www.mozilla.org/privacy/firefox/
 firefox-privacy-hub-read-the-privacy-notice-for = Read the <a href="{ $url }">Privacy Notice</a> for our products
+
+firefox-privacy-hub-mozilla-vpn = { -brand-name-mozilla-vpn }
+firefox-privacy-hub-surf-stream-and-get-work = Surf, stream and get work done on servers in over 30 countries for a secure internet connection with a new perspective.
+firefox-privacy-hub-get-mozilla-vpn = Get { -brand-name-mozilla-vpn }
diff --git a/l10n/en/firefox/products.ftl b/l10n/en/firefox/products.ftl
@@ -23,11 +23,26 @@ firefox-products-desktop = Desktop
 firefox-products-android = { -brand-name-android }
 firefox-products-ios = { -brand-name-ios }
 firefox-products-see-all-browsers = See all browsers
+firefox-products-mozilla-vpn = { -brand-name-mozilla-vpn }
+firefox-products-surf-stream-and-get-work-done = Surf, stream and get work done on servers in over 30 countries for a secure internet connection with a new perspective.
+firefox-products-get-mozilla-vpn = Get { -brand-name-mozilla-vpn }
+
+# Obsolete string
 firefox-products-firefox-lockwise = { -brand-name-firefox-lockwise }
+
+# Obsolete string
 firefox-products-keep-your-passwords-safe-and = Keep your passwords safe, and access them across all your synced devices.
+
+# Obsolete string
 firefox-products-download-lockwise = Download { -brand-name-lockwise }
+
+# Obsolete string
 firefox-products-open-in-firefox = Open in { -brand-name-firefox }
+
+# Obsolete string
 firefox-products-learn-more-about-lockwise = Learn more about { -brand-name-lockwise }
+
+# Obsolete string
 firefox-products-firefox-send = { -brand-name-firefox-send }
 firefox-products-send-your-large-files-and = Send your large files and sensitive documents safely, up to 2.5G.
 firefox-products-send-a-file = Send a file

diff --git a/media/css/firefox/accounts-2019.scss b/media/css/firefox/accounts-2019.scss
@@ -207,16 +207,12 @@
         @include at2x('/media/protocol/img/logos/firefox/browser/logo-word-hor-stack-md.png', 144px, 50px);
     }
 
-    .t-product-lockwise & {
-        @include at2x('/media/protocol/img/logos/firefox/lockwise/logo-word-hor-stack-md.png', 154px, 50px);
-    }
-
     .t-product-monitor & {
         @include at2x('/media/protocol/img/logos/firefox/monitor/logo-word-hor-stack-md.png', 138px, 50px);
     }
 
-    .t-product-send & {
-        @include at2x('/media/protocol/img/logos/firefox/send/logo-word-hor-stack-md.png', 130px, 50px);
+    .t-product-vpn & {
+        @include at2x('/media/protocol/img/logos/mozilla/vpn/logo-word-hor-stack-md.png', 143px, 50px);
     }
 
     @media #{$mq-md} {
@@ -227,16 +223,12 @@
             @include background-size(184px,  64px);
         }
 
-        .t-product-lockwise & {
-            @include background-size(197px, 64px);
-        }
-
         .t-product-monitor & {
             @include background-size(176px, 64px);
         }
 
-        .t-product-send & {
-            @include background-size(167px, 64px);
+        .t-product-vpn & {
+            @include background-size(184px, 64px);
         }
     }