Update Indonesian What's New Page (#6472)

bedrock/base/templates/macros.html

@@ -241,7 +241,7 @@ <h2 class="thank-you hidden">{{ _('Your download link was sent.') }}</h2>
 
 {# The send_yourself macro refactors and replaces the send_to_device macro above.
    This version better supports multiple products and avoids duplicate IDs so more than one widget can be embedded in a page. #}
-{% macro send_yourself(include_title=True, title_text='', spinner_color='', message_set='default', id='send-yourself', product='firefox') %}
+{% macro send_yourself(include_title=True, title_text='', spinner_color='', message_set='default', id='send-yourself', product='firefox', field_title='', field_note='', button_theme='') %}
   <section id="{{ id }}" class="mzp-c-sendyourself {% if include_title %}mzp-has-title{% endif %}" data-countries="{{ send_to_device_sms_countries(message_set) }}"{% if spinner_color %} data-spinner-color="{{ spinner_color }}"{% endif %}>
     <div class="mzp-c-sendyourself-container">
       {% if include_title %}
@@ -266,16 +266,27 @@ <h3 class="mzp-c-sendyourself-title">
         </div>
         <div class="mzp-c-sendyourself-formfields">
           <p class="mzp-c-sendyourself-field">
-            <label for="{{ id }}-input" class="mzp-js-input-label" data-alt="{{ _('Enter your email or phone number') }}">{{ _('Enter your email') }}</label>
+            <label for="{{ id }}-input" class="mzp-js-input-label" data-alt="{{ _('Enter your email or phone number') }}">
+              {% if field_title %}
+                {{ field_title }}
+              {% else %}
+                {{ _('Enter your email') }}
+              {% endif %}
+            </label>
             <input id="{{ id }}-input" class="mzp-c-sendyourself-input" name="phone-or-email" type="text" required>
-            <button type="submit" class="mzp-c-button">{{ _('Send') }}</button>
+            <button type="submit" class="mzp-c-button {{ button_theme }}">{{ _('Send') }}</button>
           </p>
           <p class="mzp-c-sendyourself-note mzp-is-sms">
             {{ _('SMS service available in select countries only. SMS &amp; data rates may apply.') }}
             {{ _('The intended recipient of the email or SMS must have consented.') }} <a href="{{ url('privacy.notices.websites') }}#campaigns">{{ _('Learn more') }}</a>
           </p>
           <p class="mzp-c-sendyourself-note mzp-is-email">
-            {{ _('The intended recipient of the email must have consented.') }} <a href="{{ url('privacy.notices.websites') }}#campaigns">{{ _('Learn more') }}</a>
+            {% if field_note %}
+              {{ field_note }}
+            {% else %}
+              {{ _('The intended recipient of the email must have consented.') }}
+            {% endif %}
+            <a href="{{ url('privacy.notices.websites') }}#campaigns">{{ _('Learn more') }}</a>
           </p>
         </div>
         <div class="mzp-c-sendyourself-thanks mzp-u-hidden">

bedrock/firefox/templates/firefox/whatsnew/index-lite.id.html

@@ -2,7 +2,9 @@
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
 
-{% add_lang_files "firefox/whatsnew" %}
+{% add_lang_files "firefox/whatsnew" "firefox/sendto"%}
+
+{% from "macros.html" import send_yourself with context %}
 
 {% extends "firefox/base-protocol.html" %}
 
@@ -30,26 +32,27 @@ <h1 class="c-page-header-up-to-date">{{ _('Your Firefox is up to date.') }}</h1>
   <div class="lite-body">
     <div class="lite-content mzp-l-content">
       <div class="lite-woman">
-          <img src="{{ static('img/firefox/whatsnew/lite/woman.png') }}" width="513" alt="">
+        <img src="{{ static('img/firefox/whatsnew/lite/woman.png') }}" width="513" alt="">
       </div>
       <div class="lite-copy">
         <div class="lite-container">
-          <img src="{{ static('img/logos/firefox/logo-lite.png') }}" width="120" alt="">
+          <img src="{{ static('img/logos/firefox/logo-lite.png') }}" width="100" alt="">
           <h1><img src="{{ static('img/logos/firefox/logo-lite-wordmark-white.png') }}" width="300" alt="Firefox Lite"></h1>
-
-          {# Rough translation: A fast and lightweight Android browser designed for you! #}
-          <p class="lite-text">Sebuah peramban android yang cepat dan ringan yang di desain untuk kamu!</p>
         </div>
-      </div>
-      <div class="lite-code qr-code">
-        <div class="lite-container">
-          <img src="{{ static('img/firefox/whatsnew/lite/qrcode.png') }}" width="250" alt="QR Code">
+        {# Rough translation: A fast and lightweight Android browser designed for you! #}
+        <p class="lite-text">Peramban Android yang cepat dan ringan yang didesain untuk kamu!</p>
+        {# Rough translation:
+          field_title: "Enter your e-mail address and send Firefox Lite to your mobile."
+          field_note: "Email recipients must agree in advance." #}
+        <div class="send-yourself-wrapper">
+          {{ send_yourself(include_title=False, product='download-firefox-rocket', id='download-firefox-rocket', message_set='download-firefox-rocket', spinner_color='#000', field_title='Masukkan alamat surel dan kirimkan Firefox Lite ke ponselmu.', field_note='Penerima email harus menyetujui sebelumnya.', button_theme='mzp-t-download') }}
         </div>
       </div>
+    </div>
   </div>
 </main>
 {% endblock %}
 
 {% block js %}
-  {{ js_bundle('firefox_whatsnew') }}
+  {{ js_bundle('whatsnew_lite') }}
 {% endblock %}

bedrock/settings/base.py

@@ -1279,6 +1279,11 @@ def get_app_name(hostname):
         'email': {
             'all': 'download-klar-mobile-whatsnew',
         }
+    },
+    'download-firefox-rocket': {
+        'email': {
+            'all': 'download-firefox-rocket',
+        }
     }
 }
 

media/css/firefox/whatsnew/send-yourself.scss

@@ -122,6 +122,10 @@
         }
     }
 
+    .mzp-c-button {
+        width: 100%;
+    }
+
     @media #{$mq-desktop} {
         @include clearfix;
 

media/css/firefox/whatsnew/whatsnew-lite.scss

@@ -3,6 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @import '../../../protocol/css/includes/lib';
+@import 'send-yourself';
 
 //* -------------------------------------------------------------------------- */
 // Up-to-date page header
@@ -61,72 +62,120 @@
 //* -------------------------------------------------------------------------- */
 // Page content
 
+.lite-container {
+    display: flex;
+    align-items: center;
+
+    @media #{$mq-lg} {
+        margin-left: 80px;
+    }
+
+    img {
+        margin-right: $spacing-md;
+    }
+}
+
 .lite-body {
-    background: linear-gradient(to top, #13e4ff, #0c85ff);
+    background: url('/media/img/firefox/whatsnew/lite/background-swoosh.png') no-repeat bottom, linear-gradient(#00e4ff, #3aa1ff, #0484ff);
     color: #fff;
     overflow: hidden;
     position: relative;
-    text-align: center;
+    padding-top: 10%;
 }
 
 .lite-text {
     @include text-display-md;
-    border-bottom: 2px solid $color-white;
-    border-top: 2px solid $color-white;
     font-weight: bold;
     margin: 0 auto $spacing-lg;
     max-width: 20em;
     padding: $spacing-sm 0;
 }
 
 .lite-content {
-
     .lite-woman {
         display: none;
     }
 
+    .lite-copy {
+        text-align: center;
+        z-index: 1;
+    }
+
+    @media #{$mq-sm} {
+        .lite-copy {
+            width: $content-sm;
+            margin: 0 auto;
+        }
+    }
+
     @media #{$mq-lg} {
-        @include grid-column-gap($layout-lg);
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 2fr 0.5fr;
 
         .lite-woman {
-            animation: balloon 6s ease-in-out infinite;
             display: block;
             position: relative;
+            min-width: 300px;
 
             img {
                 position: relative;
-                right: -40px;
+                top: -110px;
+                max-width: 130%;
             }
         }
 
+        .lite-copy {
+            margin: 100px 0 0;
+            max-height: $content-sm;
+            text-align: left;
+            width: $content-md;
+        }
+
         .lite-woman,
-        .lite-copy,
         .lite-code {
-            align-items: center;
-            display: flex;
-            justify-content: space-between;
             min-height: 700px;
         }
     }
 
     @media #{$mq-xl} {
         .lite-woman img {
-            right: -100px;
+            right: -40px;
         }
     }
 }
 
-@keyframes balloon {
-    0% {
-        transform: translateY(0) rotate(0deg);
+//* -------------------------------------------------------------------------- */
+// Send Yourself widget
+.mzp-c-sendyourself {
+    a:link {
+        color: #fff;
+
+        &:hover,
+        &:focus {
+            @include light-links;
+        }
     }
-    50% {
-        transform: translateY(-30px) rotate(-2deg);
+
+    a:visited {
+        color: $color-gray-10;
+
+        &:hover,
+        &:focus {
+            @include light-links;
+        }
     }
-    100% {
-        transform: translateY(0) rotate(0deg);
+}
+
+.has-send-to-device {
+    .firefox-container > .mzp-l-content {
+        max-width: $content-md + $layout-xl;
     }
 }
 
+// Custom widget styles
+
+.mzp-c-sendyourself-field {
+    input[type="text"] {
+        border: 1px solid #fff;
+    }
+}

media/static-bundles.json

@@ -1595,10 +1595,17 @@
     {
       "files": [
         "js/base/send-to-device.js",
+        "js/base/send-yourself.js",
         "js/firefox/whatsnew/whatsnew.js"
       ],
       "name": "firefox_whatsnew"
     },
+    {
+      "files": [
+        "js/base/send-yourself.js"
+      ],
+      "name": "whatsnew_lite"
+    },
     {
       "files": [
         "js/privacy/privacy.js"

tests/functional/firefox/test_whatsnew.py

@@ -29,11 +29,13 @@ def test_send_to_device_fails_when_missing_required_fields(base_url, selenium):
 
 @pytest.mark.skip_if_not_firefox(reason='Whatsnew pages are shown to Firefox only.')
 @pytest.mark.nondestructive
-def test_firefox_rocket_qr_code(base_url, selenium):
+def test_firefox_rocket_send_yourself(base_url, selenium):
     page = FirefoxWhatsNewPage(selenium, base_url, locale='id').open()
-    assert not page.send_to_device.is_displayed
-    assert page.is_qr_code_displayed
-
+    assert page.send_yourself.is_displayed
+    send_yourself = page.send_yourself
+    send_yourself.type_email('[email protected]')
+    send_yourself.click_send()
+    assert send_yourself.send_successful
 
 @pytest.mark.skip_if_not_firefox(reason='Whatsnew pages are shown to Firefox only.')
 @pytest.mark.nondestructive

tests/pages/firefox/whatsnew.py

@@ -6,6 +6,7 @@
 
 from pages.firefox.base import FirefoxBasePage
 from pages.regions.send_to_device import SendToDevice
+from pages.regions.send_yourself import SendYourself
 
 
 class FirefoxWhatsNewPage(FirefoxBasePage):
@@ -19,6 +20,10 @@ class FirefoxWhatsNewPage(FirefoxBasePage):
     def send_to_device(self):
         return SendToDevice(self)
 
+    @property
+    def send_to_device(self):
+        return SendYourself(self)
+
     @property
     def is_qr_code_displayed(self):
         return self.is_element_displayed(*self._qr_code_locator)

tests/pages/regions/send_yourself.py

@@ -0,0 +1,32 @@
+# 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 http://mozilla.org/MPL/2.0/.
+
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support import expected_conditions as expected
+
+from pages.firefox.base import FirefoxBaseRegion
+
+
+class SendYourself(FirefoxBaseRegion):
+
+    _root_locator = (By.CSS_SELECTOR, '.mzp-c-sendyourself')
+    _email_locator = (By.ID, 'send-yourself-input')
+    _submit_button_locator = (By.CSS_SELECTOR, '.mzp-c-sendyourself-field button[type="submit"]')
+    _thank_you_locator = (By.CSS_SELECTOR, '.mzp-c-sendyourself-thanks')
+
+    def type_email(self, value):
+        self.find_element(*self._email_locator).send_keys(value)
+
+    def click_send(self):
+        self.scroll_element_into_view(*self._submit_button_locator).click()
+        self.wait.until(expected.visibility_of_element_located(self._thank_you_locator))
+
+    @property
+    def send_successful(self):
+        el = self.selenium.find_element(*self._thank_you_locator)
+        return el.is_displayed()
+
+    @property
+    def is_displayed(self):
+        return self.page.is_element_displayed(*self._root_locator)