Only show recommended tab for opt-in users (bug 1097332)

Author: Rob Hudson

src/media/css/navbar.styl

@@ -21,6 +21,15 @@
     width: fit-content;
 }
 
+// We hide the recommendations tab by default and enable it via JS if user is
+// logged in and opted in to recommendations.
+.tab-item.recommended {
+    display: none;
+}
+.show-recommendations .tab-item.recommended {
+    display: inline-block;
+}
+
 .tab-link {
     border-bottom: 3px solid transparent;
     color: $navbar-text;

src/media/js/consumer_info.js

@@ -18,8 +18,13 @@ define('consumer_info',
             // by consumerInfo is coming from geoip, store it.
             user_helpers.set_region_geoip(data.region);
         }
-        if (user.logged_in() && data.apps !== undefined) {
-            user.update_apps(data.apps);
+        if (user.logged_in()) {
+           if (data.apps !== undefined) {
+               user.update_apps(data.apps);
+           }
+           user.update_settings({
+               enable_recommendations: data.enable_recommendations
+           });
         }
     }
 
@@ -41,7 +46,7 @@ define('consumer_info',
         // - User is logged out and we don't know the region already, or it's
         //   not valid (we need the region to do all other API calls)
         // - User is logged in (we need the installed/purchased/developed apps
-        //   list, possibly region as well)
+        //   list, recommendation opt-out, possibly region as well)
         // - The caller is forcing us
         if (force || !already_had_region || user.logged_in()) {
             requests.get(urls.api.url('consumer_info')).then(

src/media/js/main.js

@@ -183,6 +183,10 @@ function(_) {
 
         var logged_in = user.logged_in();
 
+        if (!logged_in) {
+            z.body.removeClass('show-recommendations');
+        }
+
         siteConfig.promise.then(function () {
             if (capabilities.nativeFxA()) {
                 // We might want to style things differently for native FxA users,
@@ -201,12 +205,20 @@ function(_) {
                     nunjucks.env.render('fx-accounts-banner.html',
                                         {logged_in: logged_in}));
             }
+        });
 
+        // TODO: Move this to the consumer-info callback when the waffle is
+        // removed as we no longer require siteConfig for the waffle switch.
+        $.when(siteConfig, consumer_info).then(function() {
             // To show or not to show the recommendations nav.
-            if (logged_in && settings.switches.indexOf('recommendations') !== -1) {
+            if (logged_in && user.get_setting('enable_recommendations') &&
+                    // TODO: Remove when waffle removed (bug 1083942).
+                    settings.switches.indexOf('recommendations') !== -1) {
                 z.body.addClass('show-recommendations');
             }
+        });
 
+        consumer_info.promise.then(function() {
             // Re-render footer region if necessary.
             var current_region = user_helpers.region('restofworld');
             if (current_region !== context.region) {

src/media/js/views/settings.js

@@ -31,10 +31,17 @@ define('views/settings',
         };
 
         user.update_settings(data);
+
         requests.patch(
             urls.api.url('settings'),
             data
         ).done(function() {
+            // Add/Remove recommended nav item depending on what was checked.
+            if (data.enable_recommendations) {
+                z.body.addClass('show-recommendations');
+            } else {
+                z.body.removeClass('show-recommendations');
+            }
             update_settings();
             notify({message: gettext('Settings saved')});
         }).fail(function() {

src/templates/nav.html

@@ -1,8 +1,7 @@
 {% include "_macros/act_tray.html" %}
 
 {% macro navtab(code, name, url) %}
-<li class="tab-item {{ code }}{{ ' initial-active' if path == url }}"
-    data-tab="{{ code }}">
+<li class="tab-item {{ code }}{{ ' initial-active' if path == url }}" data-tab="{{ code }}">
   <a class="tab-link" href="{{ url }}">{{ name }}</a>
 </li>
 {% endmacro %}
@@ -17,9 +16,7 @@
   {{ navtab('homepage', _('Home'), url('homepage')) }}
   {{ navtab('new', _('New'), url('new')) }}
   {{ navtab('popular', _('Popular'), url('popular')) }}
-  {% if logged_in and recommendations %}
-    {{ navtab('recommended', _('Recommended'), url('recommended')) }}
-  {% endif %}
+  {{ navtab('recommended', _('Recommended'), url('recommended')) }}
   <li class="tab-item tab-categories{{ ' initial-active' if path == url('categories') }}"
       data-tab="categories">
     <a class="tab-link mobile-cat-link" href="{{ url('categories') }}">{{ _('Categories') }}</a>

tests/ui/account_settings.js

@@ -39,6 +39,7 @@ casper.test.begin('Test account settings', {
             casper.click('#enable_recommendations');
             casper.click('.account-settings button[type="submit"]');
 
+            // Test submitting with recommendations off removes the body class.
             test.assertEqual(
                 casper.getFormValues('.account-settings').display_name,
                 'hello my name is rob hudson'
@@ -47,6 +48,28 @@ casper.test.begin('Test account settings', {
                 casper.getFormValues('.account-settings').enable_recommendations,
                 false
             );
+        });
+
+        casper.waitUntilVisible('#notification', function() {
+            test.assertNotExists('body.show-recommendations');
+        });
+
+        casper.waitWhileVisible('#notification', function() {
+            // Now test enabling recommendations.
+            casper.click('#enable_recommendations');
+            casper.click('.account-settings button[type="submit"]');
+        }, function() {
+            this.echo('[TIMEOUT] Waiting for #notification timed out.');
+        }, 7500);
+
+        casper.waitUntilVisible('#notification', function() {
+            // Test submitting with recommendations on adds the body class.
+            test.assertExists('body.show-recommendations');
+            test.assertEqual(
+                casper.getFormValues('.account-settings').enable_recommendations,
+                true
+            );
+
             casper.click('.logout');
         });
 
@@ -57,6 +80,7 @@ casper.test.begin('Test account settings', {
             test.assertSelectorHasText('.account-settings .persona', 'Register');
             test.assertNotVisible('.account-settings .logout');
             test.assertNotVisible('.account-settings footer p:first-child button');
+            test.assertNotExists('body.show-recommendations');
         });
 
         casper.run(function() {

tests/ui/navbar.js

@@ -17,6 +17,12 @@ casper.test.begin('Test navbar', {
 
         casper.waitForSelector('[data-page-type~="categories"]', function() {
             test.assertExists('[data-page-type~=categories]', 'Check navigate to category');
+            casper.click('.nav-mkt li[data-tab="recommended"] a');
+        });
+
+        // Recommended exists but may or may not be visible depending on login state.
+        casper.waitForSelector('[data-page-type~="recommended"]', function() {
+            test.assertExists('[data-page-type~=recommended]', 'Check navigate to recommended');
             casper.click('.act-tray.mobile');
         });