Implement the spring charger replacement UI.

chrome/browser/resources/chromeos/charger_replacement.js

+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('chargerReplacement', function() {
+
+  /**
+   * Enumeration of charger selection.
+   * @enum {int}
+   */
+  var CHARGER_SELECTION = {
+    NONE: 0,
+    GOOD_CHARGER: 1,
+    ORIGINAL_CHARGER: 2
+  };
+
+  /**
+   * Enumeration of html pages.
+   * @enum {int}
+   */
+  var PAGES = {
+    CHECK_CHARGER: 0,
+    CONFIRM_SAFE_CHARGER: 1,
+    CHARGER_UPDATE: 2,
+    ORDER_CHARGER_ONLINE: 3,
+    CONFIRM_ONLINE_ORDER: 4,
+    FINISH_NOT_ORDER_CHARGER: 5,
+    ORDER_CHARGER_OFFLINE: 6,
+    CHARGER_STILL_BAD: 7,
+  };
+
+  /**
+   *  Enumeration of the user's choice for order new charger or not.
+   */
+  var USER_CHOICE_FOR_CHARGER_UPDATE = {
+    ORDER_NEW_CHARGER: 0,
+    NOT_ORDER_NEW_CHARGER: 1,
+  };
+
+  /**
+   *  Enumeration of messages sent from iFrame order form.
+   */
+  var ORDER_CHARGER_IFRAME_MESSAGE = {
+    FORM_OPEN: 'FORM_OPEN',
+    SUBMIT: 'SUBMIT',
+    SUCCESS: 'SUCCESS',
+    FAILURE: 'FAILURE',
+    LINK: 'LINK',
+  };
+
+  /**
+   *  Enumeration of countries where user might purchase the device.
+   */
+  var COUNTRY = {
+    AU: 'au',
+    IRE: 'ire',
+    UK: 'uk',
+    US: 'us',
+  };
+
+  /**
+   *  Dialog argument passed from chrome to indicate whether user has ordered
+   *  new charger.
+   */
+  var NEW_CHARGER_ORDERED = '1';
+
+  /**
+   *  Charger order form iFrame url.
+   */
+  var ORDER_CHARGER_IFRAME_URL = 'https://chromesafetycheck-test.appspot.com';
+
+  /**
+   *  maximum delay in milliseconds for loading the online charger order form
+   *  into iFrame.
+   */
+  var ONLINE_ORDER_FORM_LOADING_DELAY = 30000;
+
+  /**
+   *  maximum delay in milliseconds for server to respond after user submits
+   *  the order form.
+   */
+  var ONLINE_ORDER_SUBMISSION_DELAY = 60000;
+
+  /**
+   *  urls of href links on UI.
+   */
+  var CHARGER_FAQ_LINK = 'http://chromebook.com/hp11charger/';
+  var PRIVACY_POLICY_LINK = 'http://www.google.com/policies/privacy';
+
+  var onlineOrderSubmitTimer;
+
+  /**
+   *  flag for whether the online charger order form is loaded.
+   */
+  var isOrderFormLoaded = false;
+
+  /**
+   *  flag for whether user's online charger order form submission has been
+   *  recevied by Google. True if the server responds with SUCCESSS or
+   *  FAILURE. FAILURE indicate user has some input error in form and should
+   *  submit again.
+   */
+  var isOrderSubmissionReceived = false;
+
+  /**
+   * charger selection by user.
+   */
+  var chargerSelection = CHARGER_SELECTION.NONE;
+
+  /**
+   * Set window the specified size and center it to screen.
+   */
+  function setWindowSizeAndCenter(width, height) {
+    window.resizeTo(width, height);
+    window.moveTo(window.screen.width / 2 - width / 2,
+                  window.screen.height / 2 - height / 2);
+  }
+
+  /**
+   * Show a particular page.
+   */
+  function showPage(page) {
+    switch (page) {
+      case PAGES.CHECK_CHARGER:
+        setWindowSizeAndCenter(500, 590);
+        break;
+      case PAGES.CONFIRM_SAFE_CHARGER:
+        setWindowSizeAndCenter(400, 325);
+        break;
+      case PAGES.CHARGER_UPDATE:
+        setWindowSizeAndCenter(510, 505);
+        $('not-order-charger-checkbox-strip').style.visibility = 'hidden';
+        break;
+      case PAGES.ORDER_CHARGER_ONLINE:
+        $('charger-order-form').src = ORDER_CHARGER_IFRAME_URL;
+        setWindowSizeAndCenter(1150, 550);
+        setTimeout(checkOnlineOrderFormLoaded, ONLINE_ORDER_FORM_LOADING_DELAY);
+        break;
+      case PAGES.CONFIRM_ONLINE_ORDER:
+        setWindowSizeAndCenter(420, 380);
+        break;
+      case PAGES.FINISH_NOT_ORDER_CHARGER:
+        setWindowSizeAndCenter(430, 350);
+        break;
+      case PAGES.ORDER_CHARGER_OFFLINE:
+        setWindowSizeAndCenter(750, 600);
+        break;
+      case PAGES.CHARGER_STILL_BAD:
+        setWindowSizeAndCenter(430, 380);
+        break;
+    }
+    document.body.setAttribute('page', page);
+  }
+
+  /**
+   *  Select a country from the drop down list.
+   */
+  function selectCountry() {
+    var country = $('select-device-country').value;
+    if (country == COUNTRY.US) {
+      $('new-charger').src = $('new-charger-us').src;
+      $('original-charger').src = $('original-charger-us').src;
+    } else if (country == COUNTRY.AU) {
+      $('new-charger').src = $('new-charger-au').src;
+      $('original-charger').src = $('original-charger-au').src;
+    } else {
+      $('new-charger').src = $('new-charger-uk').src;
+      $('original-charger').src = $('original-charger-uk').src;
+    }
+    $('charger-selection-strip').style.visibility = 'visible';
+  }
+
+  /**
+   *  Toggle charger box border color based on if it is selected.
+   */
+  function ToggleChargerSelection(charger, selected) {
+    if (selected) {
+      charger.classList.toggle('selected-charger', true);
+      charger.classList.toggle('de-selected-charger', false);

[xiyuan, 2013/12/06 05:03:26]

nit: we should be able to simplify this. We can make 'de-selected-charger' part
of the default style then we only need to toggle 'selected-charger' here. 

or at least, we can get rid of the "if" and just do
  charger.classList.toggle('selected-charger', selected);
  charger.classList.toggle('de-selected-charger', !selected);

[jennyz, 2013/12/06 18:15:16]

I was making de-selected-charger default style, but then toggling on the
selected-charger class would not overwrite the border color. Anyway, I
simplified this function.

+    } else {
+      charger.classList.toggle('selected-charger', false);
+      charger.classList.toggle('de-selected-charger', true);
+    }
+  }
+
+  /**
+   * Select a charger, either original or good charger with green sticker.
+   */
+  function selectCharger(selection) {
+    if (selection == CHARGER_SELECTION.NONE)
+      return;
+
+    chargerSelection = selection;
+    $('check-charger-next-step').disabled = false;
+    if (chargerSelection == CHARGER_SELECTION.GOOD_CHARGER) {
+      var selectedCharger = $('new-charger-box');
+      var notSelectedCharger = $('original-charger-box');
+    } else {
+      var selectedCharger = $('original-charger-box');
+      var notSelectedCharger = $('new-charger-box');
+    }
+    ToggleChargerSelection(selectedCharger, true);
+    ToggleChargerSelection(notSelectedCharger, false);
+  }
+
+  /**
+   * Process the flow after user select a charger.
+   */
+  function afterSelectCharger(dialogArg) {
+    if (chargerSelection == CHARGER_SELECTION.NONE)
+      return;
+
+    if (chargerSelection == CHARGER_SELECTION.GOOD_CHARGER) {
+      showPage(PAGES.CONFIRM_SAFE_CHARGER);
+    } else {
+      if (dialogArg == NEW_CHARGER_ORDERED)
+        showPage(PAGES.CHARGER_STILL_BAD);
+      else
+        showPage(PAGES.CHARGER_UPDATE);
+    }
+  }
+
+  /**
+   *  Proceed to next step after user make the choice for charger update.
+   */
+  function nextStepForChargerUpdate() {
+    var radios = document.getElementsByName('order-new-charger');
+    if (radios[USER_CHOICE_FOR_CHARGER_UPDATE.ORDER_NEW_CHARGER].checked) {
+      if (navigator.onLine)
+        showPage(PAGES.ORDER_CHARGER_ONLINE);
+      else
+        showPage(PAGES.ORDER_CHARGER_OFFLINE);
+    } else {
+      showPage(PAGES.FINISH_NOT_ORDER_CHARGER);
+    }
+  }
+
+  /**
+   *  Update the UI after user confirms the choice for charger update.
+   */
+  function afterUserConfirmationForChargerUpdate() {
+    if ($('order-new-charger').checked) {
+      $('not-order-charger-checkbox-strip').style.visibility = 'hidden';
+      $('next-to-charger-update').disabled = false;
+    } else {
+      $('not-order-charger-checkbox-strip').style.visibility = 'visible';
+      $('next-to-charger-update').disabled =
+          !$('confirm-not-order-charger').checked;
+    }
+  }
+
+  /**
+   *  Check if the online order form has been loaded in iFrame.
+   */
+  function checkOnlineOrderFormLoaded() {
+    if (!isOrderFormLoaded)
+      showPage(PAGES.ORDER_CHARGER_OFFLINE);
+  }
+
+  /**
+   *  Check if the online charger order has been successful or not.
+   */
+  function checkOnlineOrderSubmissionResponse() {
+    if (!isOrderSubmissionReceived)
+      showPage(PAGES.ORDER_CHARGER_OFFLINE);
+  }
+
+  /**
+   *  Handle the messages posted by the iFrame for online order form.
+   */
+  function handleWindowMessage(e) {
+    if (e.origin != ORDER_CHARGER_IFRAME_URL)
+      return;
+
+    var type = e.data['type'];
+    if (type == ORDER_CHARGER_IFRAME_MESSAGE.FORM_OPEN) {
+      isOrderFormLoaded = true;
+    } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.SUBMIT) {
+      if (onlineOrderSubmitTimer)
+        clearTimeout(onlineOrderSubmitTimer);
+      onlineOrderSubmitTimer = setTimeout(checkOnlineOrderSubmissionResponse,
+                                          ONLINE_ORDER_SUBMISSION_DELAY);
+    } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.SUCCESS) {
+      isOrderSubmissionReceived = true;
+      showPage(PAGES.CONFIRM_ONLINE_ORDER);
+    } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.FAILURE) {
+      isOrderSubmissionReceived = true;
+    } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.LINK) {
+      chrome.send('showLink', [e.data['link']]);
+    }
+  }
+
+  /**
+   *  Page loaded.
+   */
+  function load() {
+    var dialogArg = chrome.getVariableValue('dialogArguments');
+    showPage(PAGES.CHECK_CHARGER);
+    $('check-charger-next-step').disabled = true;
+    $('charger-selection-strip').style.visibility = 'hidden';
+    $('order-new-charger').checked = true;
+    $('finish-offline-order').disabled = true;
+    $('check-charger-next-step').onclick = function() {
+      afterSelectCharger(dialogArg);
+    };
+    $('select-device-country').onchange = function() {
+      selectCountry();
+    };
+    $('new-charger').onclick = function() {
+      selectCharger(CHARGER_SELECTION.GOOD_CHARGER);
+    };
+    $('original-charger').onclick = function() {
+      selectCharger(CHARGER_SELECTION.ORIGINAL_CHARGER);
+    };
+    $('back-to-check-charger').onclick = function() {
+      showPage(PAGES.CHECK_CHARGER);
+    };
+    $('finish-safe-charger').onclick = function() {
+      chrome.send('confirmSafeCharger');
+      chrome.send('DialogClose');
+    };
+    $('back-to-check-charger-from-charger-update').onclick = function() {
+      showPage(PAGES.CHECK_CHARGER);
+    };
+    $('next-to-charger-update').onclick = function() {
+      nextStepForChargerUpdate();
+    };
+    $('order-new-charger').onclick = function() {
+      afterUserConfirmationForChargerUpdate();
+    };
+    $('not-order-new-charger').onclick = function() {
+      afterUserConfirmationForChargerUpdate();
+    };
+    $('confirm-not-order-charger').onclick = function() {
+      afterUserConfirmationForChargerUpdate();
+    };
+    $('finish-not-order-new-charger').onclick = function() {
+      chrome.send('confirmNotOrderNewCharger');
+      chrome.send('DialogClose');
+    };
+    $('finish-online-order').onclick = function() {
+      chrome.send('confirmChargerOrderedOnline');
+      chrome.send('DialogClose');
+    };
+    $('offline-order-confirm').onclick = function() {
+      $('finish-offline-order').disabled = !$('offline-order-confirm').checked;
+    };
+    $('finish-offline-order').onclick = function() {
+      chrome.send('confirmChargerOrderByPhone');
+      chrome.send('DialogClose');
+    };
+    $('finish-still-bad-charger').onclick = function() {
+      chrome.send('confirmStillUseBadCharger');
+      chrome.send('DialogClose');
+    };
+
+    var links = document.getElementsByClassName('link');
+    for (var i = 0; i < links.length; ++i) {
+      if (links[i].id == 'privacy-link') {
+        links[i].onclick = function() {
+          chrome.send('showLink', [PRIVACY_POLICY_LINK]);
+        };
+      } else {
+        links[i].onclick = function() {
+          chrome.send('showLink', [CHARGER_FAQ_LINK]);
+        };
+      }
+    }
+
+    window.addEventListener('message', handleWindowMessage);
+  }
+
+  return {
+    load: load
+  };
+});
+
+document.addEventListener('DOMContentLoaded', chargerReplacement.load);
+