DOMUI: Implement adding and editing credit cards in the AutoFill page.

BUG=49094
TEST=none

Review URL: http://codereview.chromium.org/3308006

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@59276 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 174 insertions, 28 deletions

diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.js b/chrome/browser/resources/options/autofill_edit_address_overlay.js
index 5f6256e..a6eb980 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_address_overlay.js
@@ -39,12 +39,13 @@ cr.define('options', function() {
         self.dismissOverlay_();
       }
 
+      self.uniqueID = 0;
       self.clearInputFields_();
       self.connectInputEvents_();
     },
 
     /**
-     * Clears any uncommited input, resets the stored unique ID and dismisses
+     * Clears any uncommitted input, resets the stored unique ID and dismisses
      * the overlay.
      * @private
      */
@@ -55,8 +56,8 @@ cr.define('options', function() {
     },
 
     /**
-     * Aggregates the values in the input fields into an associate array and
-     * sends the array to the AutoFill handler.
+     * Aggregates the values in the input fields into an array and sends the
+     * array to the AutoFill handler.
      * @private
      */
     saveAddress_: function() {
@@ -133,6 +134,7 @@ cr.define('options', function() {
      */
     loadAddress_: function(address) {
       this.setInputFields_(address);
+      this.inputFieldChanged_();
       this.uniqueID = address['uniqueID'];
     },
 
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
index fccad70..47d4ad3 100644
--- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
@@ -5,6 +5,12 @@
 cr.define('options', function() {
   const OptionsPage = options.OptionsPage;
 
+  // The unique ID of the loaded credit card.
+  var uniqueID;
+
+  // The unique IDs of the billing addresses.
+  var billingAddressIDs;
+
   /**
    * AutoFillEditCreditCardOverlay class
    * Encapsulated handling of the 'Add Page' overlay page.
@@ -31,22 +37,52 @@ cr.define('options', function() {
       $('autoFillEditCreditCardCancelButton').onclick = function(event) {
         self.dismissOverlay_();
       }
+      $('autoFillEditCreditCardApplyButton').onclick = function(event) {
+        self.saveCreditCard_();
+        self.dismissOverlay_();
+      }
 
+      self.uniqueID = 0;
+      self.billingAddressIDs = new Array();
       self.clearInputFields_();
       self.connectInputEvents_();
       self.setDefaultSelectOptions_();
     },
 
     /**
-     * Clears any uncommited input, and dismisses the overlay.
+     * Clears any uncommitted input, and dismisses the overlay.
      * @private
      */
     dismissOverlay_: function() {
       this.clearInputFields_();
+      this.uniqueID = 0;
       OptionsPage.clearOverlays();
     },
 
     /**
+     * Aggregates the values in the input fields into an array and sends the
+     * array to the AutoFill handler.
+     * @private
+     */
+    saveCreditCard_: function() {
+      var creditCard = new Array(6);
+      creditCard[0] = String(this.uniqueID);
+      creditCard[1] = $('nameOnCard').value;
+      creditCard[2] = '0';
+      creditCard[3] = $('creditCardNumber').value;
+      creditCard[4] = $('expirationMonth').value;
+      creditCard[5] = $('expirationYear').value;
+
+      // Set the ID if available.
+      if (this.billingAddressIDs.length != 0) {
+        creditCard[2] =
+            String(this.billingAddressIDs[$('billingAddress').selectedIndex]);
+      }
+
+      chrome.send('updateCreditCard', creditCard);
+    },
+
+    /**
      * Connects each input field to the inputFieldChanged_() method that enables
      * or disables the 'Ok' button based on whether all the fields are empty or
      * not.
@@ -54,9 +90,9 @@ cr.define('options', function() {
      */
     connectInputEvents_: function() {
       var self = this;
-      $('nameOnCard').oninput = $('billingAddress').oninput =
-      $('creditCardNumber').oninput = $('expirationMonth').oninput =
-      $('expirationYear').oninput = function(event) {
+      $('nameOnCard').oninput = $('billingAddress').onchange =
+      $('creditCardNumber').oninput = $('expirationMonth').onchange =
+      $('expirationYear').onchange = function(event) {
         self.inputFieldChanged_();
       }
     },
@@ -67,26 +103,37 @@ cr.define('options', function() {
      * @private
      */
     inputFieldChanged_: function() {
-      var disabled =
-          !$('nameOnCard').value && !$('billingAddress').value &&
-          !$('creditCardNumber').value && !$('expirationMonth').value &&
-          !$('expirationYear').value;
+      var disabled = !$('nameOnCard').value && !$('creditCardNumber').value;
       $('autoFillEditCreditCardApplyButton').disabled = disabled;
     },
 
     /**
+     * Clears the options from the billing address select control.
+     * @private
+     */
+    clearBillingAddressControl_: function() {
+      $('billingAddress').length = 0;
+    },
+
+    /**
+     * Sets the default billing address in the 'Billing address' select control.
+     * @private
+     */
+    setDefaultBillingAddress_: function() {
+      this.clearBillingAddressControl_();
+
+      var existingAddress =
+          new Option(localStrings.getString('chooseExistingAddress'));
+      $('billingAddress').add(existingAddress, null);
+    },
+
+    /**
      * Sets the default values of the options in the 'Billing address' and
      * 'Expiration date' select controls.
      * @private
      */
     setDefaultSelectOptions_: function() {
-      // Set the 'Billing address' default option.
-      var existingAddress = document.createElement('option');
-      existingAddress.text = localStrings.getString('chooseExistingAddress');
-      existingAddress.value = 'existingAddress';
-
-      var billingAddress = $('billingAddress');
-      billingAddress.add(existingAddress, null);
+      this.setDefaultBillingAddress_();
 
       // Set the 'Expiration month' default options.
       var expirationMonth = $('expirationMonth');
@@ -106,9 +153,9 @@ cr.define('options', function() {
       // Set the 'Expiration year' default options.
       var expirationYear = $('expirationYear');
       var date = new Date();
-      var year = date.getFullYear();
+      var year = parseInt(date.getFullYear());
       for (var i = 0; i < 10; ++i) {
-        var text = parseInt(year) + i;
+        var text = year + i;
         var option = document.createElement('option');
         option.text = text;
         option.value = text;
@@ -122,10 +169,78 @@ cr.define('options', function() {
      */
     clearInputFields_: function() {
       $('nameOnCard').value = '';
-      $('billingAddress').value = '';
+      $('billingAddress').selectedIndex = 0;
       $('creditCardNumber').value = '';
-      $('expirationMonth').value = '';
-      $('expirationYear').value = '';
+      $('expirationMonth').selectedIndex = 0;
+      $('expirationYear').selectedIndex = 0;
+    },
+
+    /**
+     * Sets the value of each input field according to |creditCard|
+     * @private
+     */
+    setInputFields_: function(creditCard) {
+      $('nameOnCard').value = creditCard['nameOnCard'];
+      $('creditCardNumber').value = creditCard['creditCardNumber'];
+
+      // The options for the year select control may be out-dated at this point,
+      // e.g. the user opened the options page before midnight on New Year's Eve
+      // and then loaded a credit card profile to edit in the new year, so
+      // reload the select options just to be safe.
+      this.setDefaultSelectOptions_();
+
+      var id = parseInt(creditCard['billingAddress']);
+      for (var i = 0; i < this.billingAddressIDs.length; ++i) {
+        if (this.billingAddressIDs[i] == id)
+          $('billingAddress').selectedIndex = i;
+      }
+
+      var idx = parseInt(creditCard['expirationMonth'], 10);
+      $('expirationMonth').selectedIndex = idx - 1;
+
+      expYear = creditCard['expirationYear'];
+      var date = new Date();
+      var year = parseInt(date.getFullYear());
+      for (var i = 0; i < 10; ++i) {
+        var text = year + i;
+        if (expYear == String(text))
+          $('expirationYear').selectedIndex = i;
+      }
+    },
+
+    /**
+     * Loads the credit card data from |creditCard|, sets the input fields based
+     * on this data and stores the unique ID of the credit card.
+     * @private
+     */
+    loadCreditCard_: function(creditCard) {
+      this.setInputFields_(creditCard);
+      this.inputFieldChanged_();
+      this.uniqueID = creditCard['uniqueID'];
+    },
+
+    /**
+     * Sets the 'billingAddress' select control with the address labels in
+     * |addresses|.  Also stores the unique IDs of the corresponding addresses
+     * on this object.
+     * @private
+     */
+    setBillingAddresses_: function(addresses) {
+      this.billingAddressIDs = new Array(addresses.length);
+
+      if (addresses.length == 0) {
+        this.setDefaultBillingAddress_();
+        return;
+      }
+
+      this.clearBillingAddressControl_();
+
+      for (var i = 0; i < addresses.length; ++i) {
+        var address = addresses[i];
+        var option = new Option(address['label']);
+        this.billingAddressIDs[i] = address['uniqueID'];
+        billingAddress.add(option, null);
+      }
     },
   };
 
@@ -133,10 +248,18 @@ cr.define('options', function() {
     AutoFillEditCreditCardOverlay.getInstance().clearInputFields_();
   };
 
+  AutoFillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
+    AutoFillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
+  };
+
   AutoFillEditCreditCardOverlay.setTitle = function(title) {
     $('autoFillCreditCardTitle').textContent = title;
   };
 
+  AutoFillEditCreditCardOverlay.setBillingAddresses = function(addresses) {
+    AutoFillEditCreditCardOverlay.getInstance().setBillingAddresses_(addresses);
+  };
+
   // Export
   return {
     AutoFillEditCreditCardOverlay: AutoFillEditCreditCardOverlay
diff --git a/chrome/browser/resources/options/autofill_options.js b/chrome/browser/resources/options/autofill_options.js
index 0fd5ebc..6c90563 100644
--- a/chrome/browser/resources/options/autofill_options.js
+++ b/chrome/browser/resources/options/autofill_options.js
@@ -92,6 +92,8 @@ cr.define('options', function() {
      * @private
      */
     showEditAddressOverlay_: function(address) {
+      var title = localStrings.getString('editAddressTitle');
+      AutoFillEditAddressOverlay.setTitle(title);
       AutoFillEditAddressOverlay.loadAddress(address[0]);
       OptionsPage.showOverlay('autoFillEditAddressOverlay');
     },
@@ -110,6 +112,19 @@ cr.define('options', function() {
     },
 
     /**
+     * Shows the 'Edit credit card' overlay, using the data in |credit_card| to
+     * fill the input fields. |address| is a list with one item, an associative
+     * array that contains the credit card data.
+     * @private
+     */
+    showEditCreditCardOverlay_: function(creditCard) {
+      var title = localStrings.getString('editCreditCardTitle');
+      AutoFillEditCreditCardOverlay.setTitle(title);
+      AutoFillEditCreditCardOverlay.loadCreditCard(creditCard[0]);
+      OptionsPage.showOverlay('autoFillEditCreditCardOverlay');
+    },
+
+    /**
      * Resets the address list. This method leaves the header and horizontal
      * rule unchanged.
      * @private
@@ -148,10 +163,11 @@ cr.define('options', function() {
       for (var i = 0; i < this.numAddresses; i++) {
         var address = addresses[i];
         var option = new Option(address['label']);
-        this.addressIDs[i] = address['unique_id'];
+        this.addressIDs[i] = address['uniqueID'];
         profileList.add(option, blankAddress);
       }
 
+      AutoFillEditCreditCardOverlay.setBillingAddresses(addresses);
       this.updateButtonState_();
     },
 
@@ -168,7 +184,7 @@ cr.define('options', function() {
       for (var i = 0; i < this.numCreditCards; i++) {
         var creditCard = creditCards[i];
         var option = new Option(creditCard['label']);
-        this.creditCardIDs[i] = creditCard['unique_id'];
+        this.creditCardIDs[i] = creditCard['uniqueID'];
         profileList.add(option, null);
       }
 
@@ -196,7 +212,8 @@ cr.define('options', function() {
       if ((profileIndex = this.getAddressIndex_(idx)) != -1) {
         chrome.send('editAddress', [String(this.addressIDs[profileIndex])]);
       } else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1) {
-        // TODO(jhawkins): Implement editCreditCard command.
+        chrome.send('editCreditCard',
+                    [String(this.creditCardIDs[profileIndex])]);
       }
     },
 
@@ -254,12 +271,16 @@ cr.define('options', function() {
     AutoFillOptions.getInstance().updateAddresses_(addresses);
   };
 
+  AutoFillOptions.editAddress = function(address) {
+    AutoFillOptions.getInstance().showEditAddressOverlay_(address);
+  };
+
   AutoFillOptions.updateCreditCards = function(creditCards) {
     AutoFillOptions.getInstance().updateCreditCards_(creditCards);
   };
 
-  AutoFillOptions.editAddress = function(address) {
-    AutoFillOptions.getInstance().showEditAddressOverlay_(address);
+  AutoFillOptions.editCreditCard = function(creditCard) {
+    AutoFillOptions.getInstance().showEditCreditCardOverlay_(creditCard);
   };
 
   // Export