[IBAN UI] Prompt before removing a local IBAN.

This CL adds a confirmation dialog to confirm a user's intent to remove
a locally stored IBAN in settings.
The CL also changes the word in IBAN menu from 'Remove' to 'Delete'.

Fixed: 1424493, 1424494
Change-Id: Ie97fd6bd955079c90bae849a0442eba8dd85d9cf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4347333
Reviewed-by: Jared Saul <jsaul@google.com>
Commit-Queue: Qihui Zhao <qihuizhao@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1118858}

chrome/app/settings_strings.grdp

@@ -405,7 +405,7 @@
   <message name="IDS_SETTINGS_LOCAL_CARD_REMOVE_CONFIRMATION_TITLE" desc="Local card remove dialog confirmation title.">
     Delete card
   </message>
-  <message name="IDS_SETTINGS_LOCAL_CARD_REMOVE_CONFIRMATION_DESCRIPTION" desc="The notice/warning for the user before the card deletion.">
+  <message name="IDS_SETTINGS_LOCAL_PAYMENT_METHOD_REMOVE_CONFIRMATION_DESCRIPTION" desc="The notice/warning for the user before the card or IBAN (International Bank Account Number) deletion.">
     This payment method will be deleted from this device
   </message>
   <message name="IDS_SETTINGS_PAYMENTS_MANAGE_CREDIT_CARDS" desc="Shown in the payments section of settings. Descriptive text to inform the user that credit cards can be accessed online. Has a link.">
@@ -480,8 +480,8 @@
   <message name="IDS_SETTINGS_IBAN_EDIT" desc="Label for a context menu item that edits the selected IBAN (International Bank Account Number)." meaning="Edit selected IBAN.">
     Edit
   </message>
-  <message name="IDS_SETTINGS_IBAN_REMOVE" desc="Label for a context menu item that removes the selected IBAN (International Bank Account Number)." meaning="Remove selected IBAN.">
-    Remove
+  <message name="IDS_SETTINGS_LOCAL_IBAN_REMOVE_CONFIRMATION_TITLE" desc="Local IBAN (International Bank Account Number) remove dialog confirmation title.">
+    Delete IBAN
   </message>
   <message name="IDS_SETTINGS_UPI_ID_LABEL" desc="A label which appears next to UPI IDs, when they are listed as stored payment info, but it is visually separate from the UPI ID. It lets the user know this is a UPI ID (e.g. as opposed to a credit card number). UPI is a system for payments in India. A UPI ID is an email-like string.">
     UPI ID

chrome/app/settings_strings_grdp/IDS_SETTINGS_LOCAL_IBAN_REMOVE_CONFIRMATION_TITLE.png.sha1

@@ -0,0 +1 @@
+25a19a3ef76fc955e4292ba476dbe56f0a9a0fb9

chrome/app/settings_strings_grdp/IDS_SETTINGS_LOCAL_PAYMENT_METHOD_REMOVE_CONFIRMATION_DESCRIPTION.png.sha1

@@ -0,0 +1 @@
+458b24270e0e70ac1bdcf4d304c3e92da387524f

chrome/browser/resources/settings/BUILD.gn

@@ -85,6 +85,7 @@ build_webui("build") {
     "autofill_page/iban_edit_dialog.ts",
     "autofill_page/iban_list_entry.ts",
     "autofill_page/local_credit_card_remove_confirmation_dialog.ts",
+    "autofill_page/local_iban_remove_confirmation_dialog.ts",
     "autofill_page/password_check_edit_disclaimer_dialog.ts",
     "autofill_page/password_check_list_item.ts",
     "autofill_page/password_check.ts",

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

@@ -1,6 +1,6 @@
 <cr-dialog show-on-attach id="dialog" close-text="$i18n{close}">
   <div slot="title">$i18n{removeLocalCreditCardConfirmationTitle}</div>
-  <div slot="body">$i18n{removeLocalCreditCardConfirmationDescription}</div>
+  <div slot="body">$i18n{removeLocalPaymentMethodConfirmationDescription}</div>
   <div slot="button-container">
     <cr-button class="cancel-button" on-click="onCancelClick_" id="cancel">
       $i18n{cancel}

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

@@ -0,0 +1,12 @@
+<cr-dialog show-on-attach id="dialog" close-text="$i18n{close}">
+  <div slot="title">$i18n{removeLocalIbanConfirmationTitle}</div>
+  <div slot="body">$i18n{removeLocalPaymentMethodConfirmationDescription}</div>
+  <div slot="button-container">
+    <cr-button class="cancel-button" on-click="onCancelClick_" id="cancel">
+      $i18n{cancel}
+    </cr-button>
+    <cr-button class="action-button" on-click="onRemoveClick_" id="remove">
+      $i18n{delete}
+    </cr-button>
+  </div>
+</cr-dialog>

chrome/browser/resources/settings/autofill_page/local_iban_remove_confirmation_dialog.ts

@@ -0,0 +1,58 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview 'local-iban-remove-confirmation-dialog' is the dialog
+ * that allows removing a locally-saved IBAN.
+ */
+import 'chrome://resources/cr_elements/cr_button/cr_button.js';
+import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
+
+import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './local_iban_remove_confirmation_dialog.html.js';
+
+
+export interface SettingsLocalIbanRemoveConfirmationDialogElement {
+  $: {
+    dialog: CrDialogElement,
+    remove: HTMLElement,
+    cancel: HTMLElement,
+  };
+}
+
+export class SettingsLocalIbanRemoveConfirmationDialogElement extends
+    PolymerElement {
+  static get is() {
+    return 'settings-local-iban-remove-confirmation-dialog';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  wasConfirmed(): boolean {
+    return this.$.dialog.getNative().returnValue === 'success';
+  }
+
+  private onRemoveClick_() {
+    this.$.dialog.close();
+  }
+
+  private onCancelClick_() {
+    this.$.dialog.cancel();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'settings-local-iban-remove-confirmation-dialog':
+        SettingsLocalIbanRemoveConfirmationDialogElement;
+  }
+}
+
+customElements.define(
+    SettingsLocalIbanRemoveConfirmationDialogElement.is,
+    SettingsLocalIbanRemoveConfirmationDialogElement);

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

@@ -154,7 +154,7 @@ <h2 class="flex">$i18n{creditCards}</h2>
       </button>
       <button id="menuRemoveIban" class="dropdown-item"
           on-click="onMenuRemoveIbanClick_">
-        $i18n{removeIban}
+        $i18n{delete}
       </button>
     </cr-action-menu>
   </template>
@@ -184,3 +184,10 @@ <h2 class="flex">$i18n{creditCards}</h2>
       on-close="onLocalCreditCardRemoveConfirmationDialogClose_">
   </setting-local-credit-card-remove-confirmation-dialog>
 </template>
+
+<template is="dom-if" if="[[showLocalIbanRemoveConfirmationDialog_]]"
+    restamp>
+  <settings-local-iban-remove-confirmation-dialog
+      on-close="onLocalIbanRemoveConfirmationDialogClose_">
+  </setting-local-iban-remove-confirmation-dialog>
+</template>

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

@@ -19,6 +19,7 @@ import '../prefs/prefs.js';
 import './credit_card_edit_dialog.js';
 import './iban_edit_dialog.js';
 import './local_credit_card_remove_confirmation_dialog.js';
+import './local_iban_remove_confirmation_dialog.js';
 import './passwords_shared.css.js';
 import './payments_list.js';
 import './virtual_card_unenroll_dialog.js';
@@ -142,6 +143,7 @@ export class SettingsPaymentsSectionElement extends
       showCreditCardDialog_: Boolean,
       showIbanDialog_: Boolean,
       showLocalCreditCardRemoveConfirmationDialog_: Boolean,
+      showLocalIbanRemoveConfirmationDialog_: Boolean,
       showVirtualCardUnenrollDialog_: Boolean,
       migratableCreditCardsInfo_: String,
 
@@ -192,6 +194,7 @@ export class SettingsPaymentsSectionElement extends
   private showCreditCardDialog_: boolean;
   private showIbanDialog_: boolean;
   private showLocalCreditCardRemoveConfirmationDialog_: boolean;
+  private showLocalIbanRemoveConfirmationDialog_: boolean;
   private showVirtualCardUnenrollDialog_: boolean;
   private migratableCreditCardsInfo_: string;
   private migrationEnabled_: boolean;
@@ -427,16 +430,32 @@ export class SettingsPaymentsSectionElement extends
     this.$.ibanSharedActionMenu.get().close();
   }
 
+  private onLocalIbanRemoveConfirmationDialogClose_() {
+    // Only remove the IBAN entry if the user closed the dialog via the
+    // confirmation button (instead of cancel or close).
+    const confirmationDialog = this.shadowRoot!.querySelector(
+        'settings-local-iban-remove-confirmation-dialog');
+    assert(confirmationDialog);
+    if (confirmationDialog.wasConfirmed()) {
+      assert(this.activeIban_);
+      assert(this.activeIban_.guid);
+      this.paymentsManager_.removeIban(this.activeIban_.guid);
+      this.activeIban_ = null;
+    }
+
+    this.showLocalIbanRemoveConfirmationDialog_ = false;
+    assert(this.activeDialogAnchor_);
+    focusWithoutInk(this.activeDialogAnchor_);
+    this.activeDialogAnchor_ = null;
+  }
+
   /**
    * Handles clicking on the "Remove" IBAN button.
    */
   private onMenuRemoveIbanClick_() {
     assert(this.activeIban_);
-    this.paymentsManager_.removeIban(this.activeIban_.guid!);
+    this.showLocalIbanRemoveConfirmationDialog_ = true;
     this.$.ibanSharedActionMenu.get().close();
-    assert(this.activeDialogAnchor_);
-    focusWithoutInk(this.activeDialogAnchor_);
-    this.activeIban_ = null;
   }
 
   /**

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -979,8 +979,8 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
      IDS_AUTOFILL_DELETE_LOCAL_ADDRESS_SOURCE_NOTICE},
     {"removeLocalCreditCardConfirmationTitle",
      IDS_SETTINGS_LOCAL_CARD_REMOVE_CONFIRMATION_TITLE},
-    {"removeLocalCreditCardConfirmationDescription",
-     IDS_SETTINGS_LOCAL_CARD_REMOVE_CONFIRMATION_DESCRIPTION},
+    {"removeLocalPaymentMethodConfirmationDescription",
+     IDS_SETTINGS_LOCAL_PAYMENT_METHOD_REMOVE_CONFIRMATION_DESCRIPTION},
     {"addressRemovedMessage", IDS_SETTINGS_ADDRESS_REMOVED_MESSAGE},
     {"editAddressRequiredFieldError",
      IDS_AUTOFILL_EDIT_ADDRESS_REQUIRED_FIELD_FORM_ERROR},
@@ -1009,7 +1009,8 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
     {"moreActionsForIbanDescription",
      IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_FOR_IBAN_DESCRIPTION},
     {"editIban", IDS_SETTINGS_IBAN_EDIT},
-    {"removeIban", IDS_SETTINGS_IBAN_REMOVE},
+    {"removeLocalIbanConfirmationTitle",
+     IDS_SETTINGS_LOCAL_IBAN_REMOVE_CONFIRMATION_TITLE},
     {"migrateCreditCardsLabel", IDS_SETTINGS_MIGRATABLE_CARDS_LABEL},
     {"migratableCardsInfoSingle", IDS_SETTINGS_SINGLE_MIGRATABLE_CARD_INFO},
     {"migratableCardsInfoMultiple",

chrome/test/data/webui/settings/payments_section_iban_test.ts

@@ -218,7 +218,48 @@ suite('PaymentsSectionIban', function() {
     flush();
   });
 
-  test('verifyRemoveIbanClicked', async function() {
+  test('verifyRemoveLocalIbanDialogConfirmed', async function() {
+    const iban = createIbanEntry('FI1410093000123458', 'NickName');
+
+    const section = await createPaymentsSection(
+        /*creditCards=*/[], [iban], /*upiIds=*/[], /*prefValues=*/ {});
+    assertEquals(1, getLocalIbanListItems().length);
+
+    const rowShadowRoot = getIbanRowShadowRoot(section.$.paymentsList);
+    assertTrue(!!rowShadowRoot);
+    const menuButton = rowShadowRoot.querySelector<HTMLElement>('#ibanMenu');
+    assertTrue(!!menuButton);
+    menuButton.click();
+    flush();
+
+    const menuRemoveIban =
+        section.shadowRoot!.querySelector<CrButtonElement>('#menuRemoveIban');
+    assertTrue(!!menuRemoveIban);
+    assertFalse(menuRemoveIban.hidden);
+    menuRemoveIban.click();
+    flush();
+
+    const confirmationDialog = section.shadowRoot!.querySelector(
+        'settings-local-iban-remove-confirmation-dialog');
+    assertTrue(!!confirmationDialog);
+    await whenAttributeIs(confirmationDialog.$.dialog, 'open', '');
+
+    const closePromise = eventToPromise('close', confirmationDialog);
+
+    confirmationDialog.$.remove.click();
+    flush();
+
+    // Wait for the dialog close event to propagate to the PaymentManager.
+    await closePromise;
+
+    const paymentsManager =
+        PaymentsManagerImpl.getInstance() as TestPaymentsManager;
+    const expectations = getDefaultExpectations();
+    expectations.removedIbans = 1;
+    paymentsManager.assertExpectations(expectations);
+  });
+
+  test('verifyRemoveLocalIbanDialogCancelled', async function() {
     const iban = createIbanEntry();
 
     const section = await createPaymentsSection(
@@ -238,10 +279,23 @@ suite('PaymentsSectionIban', function() {
     menuRemoveIban.click();
     flush();
 
+    const confirmationDialog = section.shadowRoot!.querySelector(
+        'settings-local-iban-remove-confirmation-dialog');
+    assertTrue(!!confirmationDialog);
+    await whenAttributeIs(confirmationDialog.$.dialog, 'open', '');
+
+    confirmationDialog.$.cancel.click();
+    flush();
+
+    const closePromise = eventToPromise('close', confirmationDialog);
+
+    // Wait for the dialog close event to propagate to the PaymentManager.
+    await closePromise;
+
     const paymentsManager =
         PaymentsManagerImpl.getInstance() as TestPaymentsManager;
     const expectations = getDefaultExpectations();
-    expectations.removedIbans = 1;
+    expectations.removedIbans = 0;
     paymentsManager.assertExpectations(expectations);
   });
 });