src/chrome/browser/resources/chromeos/charger_replacement.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 cr.define('chargerReplacement', function() {
   6
   7   /**
   8    * Enumeration of charger selection.
   9    * @enum {int}
  10    */
  11   var CHARGER_SELECTION = {
  12     NONE: 0,
  13     GOOD_CHARGER: 1,
  14     ORIGINAL_CHARGER: 2
  15   };
  16
  17   /**
  18    * Enumeration of html pages.
  19    * @enum {int}
  20    */
  21   var PAGES = {
  22     CHECK_CHARGER: 0,
  23     CONFIRM_SAFE_CHARGER: 1,
  24     CHARGER_UPDATE: 2,
  25     ORDER_CHARGER_ONLINE: 3,
  26     CONFIRM_ONLINE_ORDER: 4,
  27     FINISH_NOT_ORDER_CHARGER: 5,
  28     ORDER_CHARGER_OFFLINE: 6,
  29     CHARGER_STILL_BAD: 7,
  30   };
  31
  32   /**
  33    *  Enumeration of the user's choice for order new charger or not.
  34    */
  35   var USER_CHOICE_FOR_CHARGER_UPDATE = {
  36     ORDER_NEW_CHARGER: 0,
  37     NOT_ORDER_NEW_CHARGER: 1,
  38   };
  39
  40   /**
  41    *  Enumeration of messages sent from iFrame order form.
  42    */
  43   var ORDER_CHARGER_IFRAME_MESSAGE = {
  44     FORM_OPEN: 'FORM_OPEN',
  45     SUBMIT: 'SUBMIT',
  46     SUCCESS: 'SUCCESS',
  47     FAILURE: 'FAILURE',
  48     LINK: 'LINK',
  49   };
  50
  51   /**
  52    *  Enumeration of countries where user might purchase the device.
  53    */
  54   var COUNTRY = {
  55     AU: 'au',
  56     CA: 'ca',
  57     IRE: 'ire',
  58     UK: 'uk',
  59     US: 'us',
  60   };
  61
  62   /**
  63    *  Dialog argument passed from chrome to indicate whether user has ordered
  64    *  new charger.
  65    */
  66   var NEW_CHARGER_ORDERED = '1';
  67
  68   /**
  69    *  Charger order form iFrame url.
  70    */
  71   var ORDER_CHARGER_IFRAME_URL = 'https://chromesafetycheck.appspot.com';
  72
  73   /**
  74    *  maximum delay in milliseconds for loading the online charger order form
  75    *  into iFrame.
  76    */
  77   var ONLINE_ORDER_FORM_LOADING_DELAY = 30000;
  78
  79   /**
  80    *  maximum delay in milliseconds for server to respond after user submits
  81    *  the order form.
  82    */
  83   var ONLINE_ORDER_SUBMISSION_DELAY = 60000;
  84
  85   /**
  86    *  urls of href links on UI.
  87    */
  88   var CHARGER_FAQ_LINK = 'http://chromebook.com/hp11charger/';
  89   var PRIVACY_POLICY_LINK = 'http://www.google.com/policies/privacy';
  90
  91   var onlineOrderSubmitTimer;
  92
  93   /**
  94    *  flag for whether the online charger order form is loaded.
  95    */
  96   var isOrderFormLoaded = false;
  97
  98   /**
  99    *  flag for whether user's online charger order form submission has been
 100    *  recevied by Google. True if the server responds with SUCCESSS or
 101    *  FAILURE. FAILURE indicate user has some input error in form and should
 102    *  submit again.
 103    */
 104   var isOrderSubmissionReceived = false;
 105
 106   /**
 107    * charger selection by user.
 108    */
 109   var chargerSelection = CHARGER_SELECTION.NONE;
 110
 111   /**
 112    * Set window the specified size and center it to screen.
 113    */
 114   function setWindowSizeAndCenter(width, height) {
 115     window.resizeTo(width, height);
 116     window.moveTo(window.screen.width / 2 - width / 2,
 117                   window.screen.height / 2 - height / 2);
 118   }
 119
 120   /**
 121    * Show a particular page.
 122    */
 123   function showPage(page) {
 124     switch (page) {
 125       case PAGES.CHECK_CHARGER:
 126         setWindowSizeAndCenter(500, 590);
 127         break;
 128       case PAGES.CONFIRM_SAFE_CHARGER:
 129         setWindowSizeAndCenter(400, 325);
 130         break;
 131       case PAGES.CHARGER_UPDATE:
 132         setWindowSizeAndCenter(510, 505);
 133         break;
 134       case PAGES.ORDER_CHARGER_ONLINE:
 135         $('charger-order-form').src = ORDER_CHARGER_IFRAME_URL;
 136         setWindowSizeAndCenter(1150, 550);
 137         setTimeout(checkOnlineOrderFormLoaded, ONLINE_ORDER_FORM_LOADING_DELAY);
 138         break;
 139       case PAGES.CONFIRM_ONLINE_ORDER:
 140         setWindowSizeAndCenter(420, 380);
 141         break;
 142       case PAGES.FINISH_NOT_ORDER_CHARGER:
 143         setWindowSizeAndCenter(430, 350);
 144         break;
 145       case PAGES.ORDER_CHARGER_OFFLINE:
 146         setWindowSizeAndCenter(750, 600);
 147         break;
 148       case PAGES.CHARGER_STILL_BAD:
 149         setWindowSizeAndCenter(430, 380);
 150         break;
 151     }
 152     document.body.setAttribute('page', page);
 153   }
 154
 155   /**
 156    *  Select a country from the drop down list.
 157    */
 158   function selectCountry() {
 159     var country = $('select-device-country').value;
 160     if (country == COUNTRY.US || country == COUNTRY.CA) {
 161       $('new-charger').src = $('new-charger-us').src;
 162       $('original-charger').src = $('original-charger-us').src;
 163     } else if (country == COUNTRY.AU) {
 164       $('new-charger').src = $('new-charger-au').src;
 165       $('original-charger').src = $('original-charger-au').src;
 166     } else {
 167       $('new-charger').src = $('new-charger-uk').src;
 168       $('original-charger').src = $('original-charger-uk').src;
 169     }
 170     $('charger-selection-strip').style.visibility = 'visible';
 171   }
 172
 173   /**
 174    *  Toggle charger box border color based on if it is selected.
 175    */
 176   function ToggleChargerSelection(charger, selected) {
 177     charger.classList.toggle('selected-charger', selected);
 178     charger.classList.toggle('de-selected-charger', !selected);
 179   }
 180
 181   /**
 182    * Select a charger, either original or good charger with green sticker.
 183    */
 184   function selectCharger(selection) {
 185     if (selection == CHARGER_SELECTION.NONE)
 186       return;
 187
 188     chargerSelection = selection;
 189     $('check-charger-next-step').disabled = false;
 190     if (chargerSelection == CHARGER_SELECTION.GOOD_CHARGER) {
 191       var selectedCharger = $('new-charger-box');
 192       var notSelectedCharger = $('original-charger-box');
 193     } else {
 194       var selectedCharger = $('original-charger-box');
 195       var notSelectedCharger = $('new-charger-box');
 196     }
 197     ToggleChargerSelection(selectedCharger, true);
 198     ToggleChargerSelection(notSelectedCharger, false);
 199   }
 200
 201   /**
 202    * Process the flow after user select a charger.
 203    */
 204   function afterSelectCharger(dialogArg) {
 205     if (chargerSelection == CHARGER_SELECTION.NONE)
 206       return;
 207
 208     if (chargerSelection == CHARGER_SELECTION.GOOD_CHARGER) {
 209       showPage(PAGES.CONFIRM_SAFE_CHARGER);
 210     } else {
 211       if (dialogArg == NEW_CHARGER_ORDERED)
 212         showPage(PAGES.CHARGER_STILL_BAD);
 213       else
 214         showPage(PAGES.CHARGER_UPDATE);
 215     }
 216   }
 217
 218   /**
 219    *  Proceed to next step after user make the choice for charger update.
 220    */
 221   function nextStepForChargerUpdate() {
 222     var radios = document.getElementsByName('order-new-charger');
 223     if (radios[USER_CHOICE_FOR_CHARGER_UPDATE.ORDER_NEW_CHARGER].checked) {
 224       if (navigator.onLine)
 225         showPage(PAGES.ORDER_CHARGER_ONLINE);
 226       else
 227         showPage(PAGES.ORDER_CHARGER_OFFLINE);
 228     } else {
 229       showPage(PAGES.FINISH_NOT_ORDER_CHARGER);
 230     }
 231   }
 232
 233   /**
 234    *  Update the UI after user confirms the choice for charger update.
 235    */
 236   function afterUserConfirmationForChargerUpdate() {
 237     if ($('order-new-charger').checked) {
 238       $('not-order-charger-checkbox-strip').style.visibility = 'hidden';
 239       $('next-to-charger-update').disabled = false;
 240     } else {
 241       $('not-order-charger-checkbox-strip').style.visibility = 'visible';
 242       $('next-to-charger-update').disabled =
 243           !$('confirm-not-order-charger').checked;
 244     }
 245   }
 246
 247   /**
 248    *  Check if the online order form has been loaded in iFrame.
 249    */
 250   function checkOnlineOrderFormLoaded() {
 251     if (!isOrderFormLoaded)
 252       showPage(PAGES.ORDER_CHARGER_OFFLINE);
 253   }
 254
 255   /**
 256    *  Check if the online charger order has been successful or not.
 257    */
 258   function checkOnlineOrderSubmissionResponse() {
 259     if (!isOrderSubmissionReceived)
 260       showPage(PAGES.ORDER_CHARGER_OFFLINE);
 261   }
 262
 263   /**
 264    *  Handle the messages posted by the iFrame for online order form.
 265    */
 266   function handleWindowMessage(e) {
 267     if (e.origin != ORDER_CHARGER_IFRAME_URL)
 268       return;
 269
 270     var type = e.data['type'];
 271     if (type == ORDER_CHARGER_IFRAME_MESSAGE.FORM_OPEN) {
 272       isOrderFormLoaded = true;
 273     } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.SUBMIT) {
 274       if (onlineOrderSubmitTimer)
 275         clearTimeout(onlineOrderSubmitTimer);
 276       onlineOrderSubmitTimer = setTimeout(checkOnlineOrderSubmissionResponse,
 277                                           ONLINE_ORDER_SUBMISSION_DELAY);
 278     } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.SUCCESS) {
 279       isOrderSubmissionReceived = true;
 280       showPage(PAGES.CONFIRM_ONLINE_ORDER);
 281     } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.FAILURE) {
 282       isOrderSubmissionReceived = true;
 283     } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.LINK) {
 284       chrome.send('showLink', [e.data['link']]);
 285     }
 286   }
 287
 288   /**
 289    *  Page loaded.
 290    */
 291   function load() {
 292     var dialogArg = chrome.getVariableValue('dialogArguments');
 293     showPage(PAGES.CHECK_CHARGER);
 294     $('check-charger-next-step').disabled = true;
 295     $('charger-selection-strip').style.visibility = 'hidden';
 296     $('order-new-charger').checked = true;
 297     $('finish-offline-order').disabled = true;
 298     $('check-charger-next-step').onclick = function() {
 299       afterSelectCharger(dialogArg);
 300     };
 301     $('select-device-country').onchange = function() {
 302       selectCountry();
 303     };
 304     $('new-charger').onclick = function() {
 305       selectCharger(CHARGER_SELECTION.GOOD_CHARGER);
 306     };
 307     $('original-charger').onclick = function() {
 308       selectCharger(CHARGER_SELECTION.ORIGINAL_CHARGER);
 309     };
 310     $('back-to-check-charger').onclick = function() {
 311       showPage(PAGES.CHECK_CHARGER);
 312     };
 313     $('finish-safe-charger').onclick = function() {
 314       chrome.send('confirmSafeCharger');
 315       chrome.send('dialogClose');
 316     };
 317     $('not-order-charger-checkbox-strip').style.visibility = 'hidden';
 318     $('back-to-check-charger-from-charger-update').onclick = function() {
 319       showPage(PAGES.CHECK_CHARGER);
 320     };
 321     $('next-to-charger-update').onclick = function() {
 322       nextStepForChargerUpdate();
 323     };
 324     $('order-new-charger').onclick = function() {
 325       afterUserConfirmationForChargerUpdate();
 326     };
 327     $('not-order-new-charger').onclick = function() {
 328       afterUserConfirmationForChargerUpdate();
 329     };
 330     $('confirm-not-order-charger').onclick = function() {
 331       afterUserConfirmationForChargerUpdate();
 332     };
 333     $('finish-not-order-new-charger').onclick = function() {
 334       chrome.send('confirmNotOrderNewCharger');
 335       chrome.send('dialogClose');
 336     };
 337     $('finish-online-order').onclick = function() {
 338       chrome.send('confirmChargerOrderedOnline');
 339       chrome.send('dialogClose');
 340     };
 341     $('offline-order-confirm').onclick = function() {
 342       $('finish-offline-order').disabled = !$('offline-order-confirm').checked;
 343     };
 344     $('finish-offline-order').onclick = function() {
 345       chrome.send('confirmChargerOrderByPhone');
 346       chrome.send('dialogClose');
 347     };
 348     $('finish-still-bad-charger').onclick = function() {
 349       chrome.send('confirmStillUseBadCharger');
 350       chrome.send('dialogClose');
 351     };
 352
 353     var links = document.getElementsByClassName('link');
 354     for (var i = 0; i < links.length; ++i) {
 355       if (links[i].id == 'privacy-link') {
 356         links[i].onclick = function() {
 357           chrome.send('showLink', [PRIVACY_POLICY_LINK]);
 358         };
 359       } else {
 360         links[i].onclick = function() {
 361           chrome.send('showLink', [CHARGER_FAQ_LINK]);
 362         };
 363       }
 364     }
 365
 366     window.addEventListener('message', handleWindowMessage);
 367   }
 368
 369   return {
 370     load: load
 371   };
 372 });
 373
 374 document.addEventListener('DOMContentLoaded', chargerReplacement.load);
 375