ask user to confirm switching regions when we detect new region from …

…SIM card (bug 877490)

hearth/media/css/modal.styl

@@ -23,6 +23,9 @@ body.overlayed {
         opacity: 1;
         pointer-events: auto;
     }
+    &.light {
+        background: rgba(255,255,255,.75);
+    }
 }
 
 .modal {
@@ -31,9 +34,10 @@ body.overlayed {
     border-radius: 10px;
     diagonal-lines();
     display: none;
+    left: 5%;
     position: fixed;
     top: 49px;
-    width: 100%;
+    width: 90%;
     z-index: 60;
     &.show {
         display: block;
@@ -46,6 +50,28 @@ body.overlayed {
     textarea {
         box-shadow: 0 2px 2px 0 rgba(0,0,0,.15) inset;
     }
+    &.confirmation {
+        background: rgba(0,0,0,.85);
+        border: 1px solid #000;
+        border-radius: 5px;
+        color: #fff;
+        text-align: center;
+        top: 102px;
+        .content {
+            margin: 15px 0;
+        }
+    }
+    button {
+        height: 30px;
+        line-height: 32px;
+        min-width: auto;
+        + button {
+            margin-left: 10px;
+        }
+    }
+    button.alt {
+        box-shadow: none;
+    }
 }
 
 @media $at-least-desktop {
@@ -65,5 +91,9 @@ body.overlayed {
                 width: 60%;
             }
         }
+        &.confirmation {
+            margin-left: -215px;
+            width: 431px;
+        }
     }
 }

hearth/media/js/confirmation.js

@@ -0,0 +1,64 @@
+define('confirmation', ['capabilities', 'helpers', 'jquery', 'templates', 'z'], function(caps, helpers, $, nunjucks, z) {
+    var cloakEl = $('.cloak');
+    var confirmationEl = $('<div class="modal confirmation">');
+    var addedClasses = [];
+
+    function confirmationShow() {
+        cloakEl.addClass('show light');
+        confirmationEl.addClass('show');
+    }
+
+    function confirmationHide() {
+        cloakEl.removeClass('show light');
+        confirmationEl.removeClass('show');
+    }
+
+    function confirmation(opts) {
+        var def = $.Deferred();
+        def.always(confirmationHide);
+        confirmationEl.removeClass(addedClasses.join(' '));
+        var contentEl = confirmationEl.find('.content');
+        contentEl.text('');
+        addedClasses = [];
+
+        var message = opts.message;
+        if (!message) return;
+
+        if ('classes' in opts) {
+            addedClasses = opts.classes.split(/\s+/);
+        }
+
+        if (opts.closable) {
+            addedClasses.push('closable');
+        }
+        if (opts.timeout) {
+            setTimeout(function() {def.reject();}, opts.timeout);
+        }
+
+        confirmationEl.addClass(addedClasses.join(' '));
+
+        var fancyMessage = fancy(message);
+        if (fancyMessage == message) {
+            contentEl.text(message);
+        } else {
+            contentEl.html(fancyMessage);
+        }
+
+        show();
+
+        return def.promise();
+    }
+
+    var content = nunjucks.env.getTemplate('confirmation.html').render(helpers);
+
+    confirmationEl.html(content).on('touchstart click', function() {
+        console.error('reject')
+        def.reject();
+    }).on('touchstart click', '.yes', function() {
+        console.error('resolve')
+        def.resolve();
+    });
+    z.body.append(confirmationEl);
+
+    return confirmation;
+});

hearth/media/js/mobilenetwork.js

@@ -1,4 +1,9 @@
-define('mobilenetwork', [], function() {
+define('mobilenetwork',
+       ['l10n', 'log', 'notification', 'settings', 'user', 'utils', 'views'],
+       function(l10n, log, notification, settings, user, utils, views) {
+    var console = log('mobilenetwork');
+    var gettext = l10n.gettext;
+
     var regions = {
         // United States
         310: 'us',
@@ -196,7 +201,105 @@ define('mobilenetwork', [], function() {
         };
     }
 
+    function confirmRegion(currentRegion, newRegion) {
+        // Ask user to switch to the new region we detected from the SIM card.
+        var currentRegionName = settings.REGION_CHOICES_SLUG[currentRegion];
+        var newRegionName = settings.REGION_CHOICES_SLUG[newRegion];
+        var message = gettext(
+            'You are currently browsing content for *{current_region}*. ' +
+            'Would you like to switch to *{new_region}*?',
+            {current_region: currentRegionName,
+             new_region: newRegionName});
+        $.when(notification.confirmation({message: message}))
+         .fail(function() {
+            console.log('User declined to change region from', currentRegionName, 'to', newRegionName);
+         })
+         .done(function() {
+            console.log('User changed region from', currentRegionName, 'to', newRegionName);
+            user.update_settings({region: newRegion});
+            views.reload();
+         });
+    }
+
+    function detectMobileNetwork(navigator, fake) {
+        navigator = navigator || window.navigator;
+
+        var GET = utils.getVars();
+        var mcc;
+        var mnc;
+        var region;
+
+        // Hardcoded carrier should never get overridden.
+        var carrier = user.get_setting('carrier');
+        if (carrier && typeof carrier === 'object') {
+            carrier = carrier.slug;
+        }
+        carrier = carrier || GET.carrier || null;
+
+        if (!carrier) {
+            // Get mobile region and carrier information passed via querystring.
+            mcc = GET.mcc;
+            mnc = GET.mnc;
+        }
+
+        try {
+            // When Fireplace is served as a privileged packaged app (and not
+            // served via Yulelog) our JS will have direct access to this API.
+            var conn = navigator.mozMobileConnection;
+            if (conn) {
+                // `MCC`: Mobile Country Code
+                // `MNC`: Mobile Network Code
+                // `lastKnownHomeNetwork`: `{MCC}-{MNC}` (SIM's origin)
+                // `lastKnownNetwork`: `{MCC}-{MNC}` (could be different network if roaming)
+                var network = (conn.lastKnownHomeNetwork || conn.lastKnownNetwork || '-').split('-');
+                mcc = network[0];
+                mnc = network[1];
+                console.log('lastKnownNetwork', conn.lastKnownNetwork);
+                console.log('lastKnownHomeNetwork', conn.lastKnownHomeNetwork);
+                console.log('MCC = ' + mcc + ', MNC = ' + mnc);
+            } else {
+                console.warn('Error accessing navigator.mozMobileConnection');
+            }
+        } catch(e) {
+            // Fail gracefully if `navigator.mozMobileConnection` gives us problems.
+            console.warn('Error accessing navigator.mozMobileConnection:', e);
+        }
+
+        if (mcc || mnc) {
+            // Look up region and carrier from MCC (Mobile Country Code)
+            // and MNC (Mobile Network Code).
+            var network = getNetwork(mcc, mnc);
+            region = network.region;
+            carrier = network.carrier;
+        }
+
+        var newSettings = {};
+
+        var lastRegion = user.get_setting('last_region');
+
+        if (region && lastRegion && lastRegion != region) {
+            confirmRegion(lastRegion, region);
+            // Update the last region we detected from the SIM.
+            newSettings.last_region = region;
+        }
+
+        // Get region from settings saved to localStorage.
+        region = user.get_setting('region') || region;
+
+        // If it turns out the region is null, when we get a response from an
+        // API request, we look at the `API-Filter` header to determine the region
+        // in which Zamboni geolocated the user.
+
+        newSettings.carrier = carrier || null;
+        newSettings.region = region || null;
+
+        user.update_settings(newSettings);
+    }
+
+    detectMobileNetwork(navigator);
+
     return {
+        detectMobileNetwork: detectMobileNetwork,
         getNetwork: getNetwork
     };
 });

hearth/media/js/notification.js

@@ -1,16 +1,7 @@
-define('notification', ['capabilities', 'jquery', 'z'], function(caps, $, z) {
+define('notification', ['capabilities', 'helpers', 'jquery', 'templates', 'z'], function(caps, helpers, $, nunjucks, z) {
+    var notificationDef;
     var notificationEl = $('<div id="notification">');
     var contentEl = $('<div id="notification-content">');
-    var def;
-    var addedClasses = [];
-
-    function show() {
-        notificationEl.addClass('show');
-    }
-
-    function hide() {
-        notificationEl.removeClass('show');
-    }
 
     // allow *bolding* message text
     var re = /\*([^\*]+)\*/g;
@@ -19,15 +10,20 @@ define('notification', ['capabilities', 'jquery', 'z'], function(caps, $, z) {
         return s.replace(re, function(_, match) { return '<b>' + match + '</b>'; });
     }
 
+    function notificationShow() {
+        notificationEl.addClass('show');
+    }
+
+    function notificationHide() {
+        notificationEl.removeClass('show');
+    }
+
     function notification(opts) {
-        if (def && def.state() === 'pending') {
-            def.reject();
-        }
-        def = $.Deferred();
-        def.always(hide);
-        notificationEl.removeClass(addedClasses.join(' '));
+        var addedClasses = [];
+        notificationDef = $.Deferred();
+        notificationDef.always(notificationHide);
+        notificationEl.attr('class', '');
         contentEl.text('');
-        addedClasses = [];
 
         var message = opts.message;
         if (!message) return;
@@ -39,7 +35,7 @@ define('notification', ['capabilities', 'jquery', 'z'], function(caps, $, z) {
         if (opts.closable) {
             addedClasses.push('closable');
         }
-        setTimeout(function() {def.reject();}, opts.timeout || 5000);
+        setTimeout(function() {notificationDef.reject();}, opts.timeout || 5000);
 
         notificationEl.addClass(addedClasses.join(' '));
 
@@ -50,16 +46,80 @@ define('notification', ['capabilities', 'jquery', 'z'], function(caps, $, z) {
             contentEl.html(fancyMessage);
         }
 
-        notificationEl.addClass('show');
-
-        return def.promise();
+        notificationShow();
 
+        return notificationDef.promise();
     }
 
-    notificationEl.append(contentEl).on('touchstart click', function() {
-        def.resolve();
+    notificationEl.append(contentEl).on('touchend click', function() {
+        notificationDef.resolve();
     });
     z.body.append(notificationEl);
 
-    return {notification: notification};
+
+    var confirmationDef = $.Deferred();
+    var cloakEl = $('.cloak');
+    var confirmationEl = $('<div class="modal confirmation">');
+
+    function confirmationShow() {
+        cloakEl.addClass('show light');
+        confirmationEl.addClass('show');
+    }
+
+    function confirmationHide() {
+        cloakEl.removeClass('show light');
+        confirmationEl.removeClass('show');
+    }
+
+    function confirmation(opts) {
+        var addedClasses = [];
+        confirmationDef.always(confirmationHide);
+
+        confirmationEl.attr('class', 'modal confirmation');
+        var contentEl = confirmationEl.find('.content');
+        contentEl.text('');
+
+        var message = opts.message;
+        if (!message) return;
+
+        if ('classes' in opts) {
+            addedClasses = opts.classes.split(/\s+/);
+        }
+
+        if (opts.closable) {
+            addedClasses.push('closable');
+        }
+        if (opts.timeout) {
+            setTimeout(function() {confirmationDef.reject();}, opts.timeout);
+        }
+
+        confirmationEl.addClass(addedClasses.join(' '));
+
+        var fancyMessage = fancy(message);
+        if (fancyMessage == message) {
+            contentEl.text(message);
+        } else {
+            contentEl.html(fancyMessage);
+        }
+
+        confirmationShow();
+
+        return confirmationDef.promise();
+    }
+
+    var content = nunjucks.env.getTemplate('confirmation.html').render(helpers);
+
+    confirmationEl.html(content).on('touchend click', function() {
+        confirmationHide();
+        confirmationDef.reject();
+    }).on('touchend click', '.yes', function() {
+        confirmationHide();
+        confirmationDef.resolve();
+    });
+    z.body.append(confirmationEl);
+
+    return {
+        notification: notification,
+        confirmation: confirmation
+    };
 });