Move the canMakePayment toggle to the Payments settings subpage

When the privacy settings redesign is enabled, this setting will be
removed from the privacy card. However, it needs to be resurfaced
somewhere else.

See https://docs.google.com/presentation/d/1Y1hSAUri9SuKtByE1xNv0-1TxbgbUFHPhwWS77fcEEE/
for more background.

Bug: 1032584
Change-Id: Ia2a5b45625ba42223a1ccecd8f2b790d289bc95d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2090424
Commit-Queue: Martin Šrámek <msramek@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749142}

chrome/browser/resources/settings/autofill_page/BUILD.gn

@@ -33,6 +33,7 @@ js_library("autofill_page") {
     ":autofill_section",
     ":passwords_section",
     ":payments_section",
+    "..:metrics_browser_proxy",
     "..:open_window_proxy",
     "..:route",
     "..:router",

chrome/browser/resources/settings/autofill_page/payments_section.html

@@ -10,6 +10,7 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../metrics_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../prefs/prefs.html">
@@ -45,6 +46,15 @@
         sub-label="$i18n{enableCreditCardsSublabel}"
         pref="{{prefs.autofill.credit_card_enabled}}">
     </settings-toggle-button>
+    <template is="dom-if" if="[[privacySettingsRedesignEnabled_]]">
+      <settings-toggle-button id="canMakePaymentToggle"
+          class="settings-box first"
+          aria-label="$i18n{canMakePaymentToggleLabel}"
+          label="$i18n{canMakePaymentToggleLabel}"
+          pref="{{prefs.payments.can_make_payment_enabled}}"
+          on-settings-boolean-control-change="onCanMakePaymentChange_">
+      </settings-toggle-button>
+    </template>
     <template is="dom-if"
         if="[[shouldShowFidoToggle_(
             prefs.autofill.credit_card_enabled.value,

chrome/browser/resources/settings/autofill_page/payments_section.js

@@ -190,6 +190,17 @@ cr.define('settings', function() {
         },
         readOnly: true,
       },
+
+      /**
+       * True if the privacy settings redesign feature is enabled.
+       * @private
+       */
+      privacySettingsRedesignEnabled_: {
+        type: Boolean,
+        value() {
+          return loadTimeData.getBoolean('privacySettingsRedesignEnabled');
+        }
+      },
     },
 
     listeners: {
@@ -373,6 +384,18 @@ cr.define('settings', function() {
       this.paymentsManager_.migrateCreditCards();
     },
 
+    /**
+     * Records changes made to the "can a website check if you have saved
+     * payment methods" setting for logging, the logic of actually changing the
+     * setting is taken care of by the webUI pref.
+     * @private
+     */
+    onCanMakePaymentChange_() {
+      settings.MetricsBrowserProxyImpl.getInstance()
+          .recordSettingsPageHistogram(
+              settings.SettingsPageInteractions.PRIVACY_PAYMENT_METHOD);
+    },
+
     /**
      * Listens for the save-credit-card event, and calls the private API.
      * @param {!Event} event

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -422,6 +422,7 @@ CrSettingsPaymentsSectionTest.prototype = {
     '../test_browser_proxy.js',
     'passwords_and_autofill_fake_data.js',
     'sync_test_util.js',
+    'test_metrics_browser_proxy.js',
     'test_sync_browser_proxy.js',
     '../test_util.js',
     'payments_section_test.js',

chrome/test/data/webui/settings/payments_section_test.js

@@ -594,6 +594,40 @@ cr.define('settings_payments_section', function() {
 
       assertEquals(0, upiRows.length);
     });
+
+    test('CanMakePaymentToggle_Visible', function() {
+      // The privacy settings redesign exposes the 'canMakePayment' toggle
+      // in the Payments section.
+      loadTimeData.overrideValues({'privacySettingsRedesignEnabled': true});
+      const section = createPaymentsSection(
+          /*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
+      assertTrue(test_util.isVisible(section.$$('#canMakePaymentToggle')));
+    });
+
+    test('CanMakePaymentToggle_NotPresentBeforeRedesign', function() {
+      // Before the privacy settings redesign, the 'canMakePayment' toggle
+      // lived elsewhere.
+      loadTimeData.overrideValues({'privacySettingsRedesignEnabled': false});
+      const section = createPaymentsSection(
+          /*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
+      assertFalse(!!section.$$('#canMakePaymentToggle'));
+    });
+
+    test('CanMakePaymentToggle_RecordsMetrics', async function() {
+      const testMetricsBrowserProxy = new TestMetricsBrowserProxy();
+      settings.MetricsBrowserProxyImpl.instance_ = testMetricsBrowserProxy;
+
+      loadTimeData.overrideValues({'privacySettingsRedesignEnabled': true});
+      const section = createPaymentsSection(
+          /*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
+
+      section.$$('#canMakePaymentToggle').click();
+      result = await testMetricsBrowserProxy.whenCalled(
+          'recordSettingsPageHistogram');
+
+      assertEquals(
+          settings.SettingsPageInteractions.PRIVACY_PAYMENT_METHOD, result);
+    });
   });
   // #cr_define_end
 });