Settings People Revamp: Add Payments integration to new Sync Settings.

chrome/browser/resources/settings/people_page/sync_page.js

 // Copyright 2015 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.
 
 (function() {
 
 /**
  * Names of the radio buttons which allow the user to choose his encryption
  * mechanism.
  * @enum {string}
@@ skipping 155 matching lines @@
   },
 
   /**
    * Handler for when the sync preferences are updated.
    * @private
    */
   handleSyncPrefsChanged_: function(syncPrefs) {
     this.syncPrefs = syncPrefs;
     this.selectedPage_ = settings.PageStatus.CONFIGURE;
 
+    // If autofill is not registered or synced, force Payments integration off.
+    if (!this.syncPrefs.autofillRegistered || !this.syncPrefs.autofillSynced)
+      this.set('syncPrefs.paymentsIntegrationEnabled', false);
+
     // Hide the new passphrase box if the sync data has been encrypted.
     if (this.syncPrefs.encryptAllData)
       this.creatingNewPassphrase_ = false;
   },
 
   /**
    * Handler for when the sync all data types checkbox is changed.
    * @param {Event} event
    * @private
    */
   onSyncAllDataTypesChanged_: function(event) {
     if (event.target.checked) {
       this.set('syncPrefs.syncAllDataTypes', true);
       this.set('syncPrefs.appsSynced', true);
       this.set('syncPrefs.extensionsSynced', true);
       this.set('syncPrefs.preferencesSynced', true);
       this.set('syncPrefs.autofillSynced', true);
       this.set('syncPrefs.typedUrlsSynced', true);
       this.set('syncPrefs.themesSynced', true);
       this.set('syncPrefs.bookmarksSynced', true);
       this.set('syncPrefs.passwordsSynced', true);
       this.set('syncPrefs.tabsSynced', true);
+      this.set('syncPrefs.paymentsIntegrationEnabled', true);
     }
 
     this.onSingleSyncDataTypeChanged_();
   },
 
   /**
-   * Handler for when any sync data type checkbox is changed.
+   * Handler for when any sync data type checkbox is changed (except autofill).
    * @private
    */
   onSingleSyncDataTypeChanged_: function() {
     this.browserProxy_.setSyncDatatypes(this.syncPrefs).then(
         this.handlePageStatusChanged_.bind(this));
   },
 
   /** @private */
   onManageSyncedDataTap_: function() {
     window.open(loadTimeData.getString('syncDashboardUrl'));
   },
 
   /**
+   * Handler for when the autofill data type checkbox is changed.
+   * @private
+   */
+  onAutofillDataTypeChanged_: function() {
+    this.set('syncPrefs.paymentsIntegrationEnabled',
+             this.syncPrefs.autofillSynced);
+
+    this.onSingleSyncDataTypeChanged_();
+  },
+
+  /**
    * Sends the newly created custom sync passphrase to the browser.
    * @private
    */
   onSaveNewPassphraseTap_: function() {
     assert(this.creatingNewPassphrase_);
 
     // If a new password has been entered but it is invalid, do not send the
     // sync state to the API.
     if (!this.validateCreatedPassphrases_())
       return;
@@ skipping 85 matching lines @@
   /**
    * @param {boolean} syncAllDataTypes
    * @param {boolean} enforced
    * @return {boolean} Whether the sync checkbox should be disabled.
    */
   shouldSyncCheckboxBeDisabled_: function(syncAllDataTypes, enforced) {
     return syncAllDataTypes || enforced;
   },
 
   /**
+   * @param {boolean} syncAllDataTypes
+   * @param {boolean} autofillSynced
+   * @return {boolean} Whether the sync checkbox should be disabled.
+   */
+  shouldPaymentsCheckboxBeDisabled_: function(
+      syncAllDataTypes, autofillSynced) {
+    return syncAllDataTypes || !autofillSynced;
+  },
+
+  /**
    * Checks the supplied passphrases to ensure that they are not empty and that
    * they match each other. Additionally, displays error UI if they are
    * invalid.
    * @return {boolean} Whether the check was successful (i.e., that the
    *     passphrases were valid).
    * @private
    */
   validateCreatedPassphrases_: function() {
     var passphraseInput = this.$$('#passphraseInput');
     var passphraseConfirmationInput = this.$$('#passphraseConfirmationInput');
 
     var passphrase = passphraseInput.value;
     var confirmation = passphraseConfirmationInput.value;
 
     var emptyPassphrase = !passphrase;
     var mismatchedPassphrase = passphrase != confirmation;
 
     passphraseInput.invalid = emptyPassphrase;
     passphraseConfirmationInput.invalid =
         !emptyPassphrase && mismatchedPassphrase;
 
     return !emptyPassphrase && !mismatchedPassphrase;
   },
 });
 
 })();