[Metadata] Add new metadata information text for cards in settings

Show new metadata information for cards in settings page
The new message will be shown below the summary label.
When virtual card is enrolled or eligible, show virtual card related
text. Otherwise show cardholder name. Note that cardhoder name can be
empty so this row will be hidden in that case.

Mock: https://screenshot.googleplex.com/BrQ8WQatvgTQcWh
Impl: https://screenshot.googleplex.com/uutxLRXFhaHf4LK

Bug: 1313616
Change-Id: I7b599d60a1a9428248ef22823a10c06e3f1c7891
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3817912
Commit-Queue: Siyu An <siyua@chromium.org>
Reviewed-by: Theodore Olsauskas-Warren <sauski@google.com>
Reviewed-by: Christoph Schwering <schwering@google.com>
Reviewed-by: Mohamed Amir Yosef <mamir@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1034117}

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

@@ -4,11 +4,19 @@
         display: flex;
         flex: 1;
       }
+      .list-item {
+        margin-bottom: 8px;
+        margin-top: 8px;
+      }
 
       #creditCardExpiration {
         flex: 1;
       }
 
+      #summarySublabel {
+        color: var(--cr-secondary-text-color);
+      }
+
       .payments-label {
         color: var(--cr-secondary-text-color);
         margin-inline-start: 16px;
@@ -20,11 +28,17 @@
     </style>
     <div class="list-item">
       <div class="type-column">
-        <span id="creditCardLabel" class="ellipses">
-          [[creditCard.metadata.summaryLabel]]
-        </span>
+        <div class="summary-column">
+          <div id = "summaryLabel" class="ellipses">
+            [[creditCard.metadata.summaryLabel]]
+          </div>
+          <div id = "summarySublabel"
+            hidden$="[[!shouldShowSecondarySublabel_()]]" class="ellipses">
+            [[getSecondarySublabel_(creditCard.metadata)]]
+          </div>
+        </div>
         <span id="virtualCardLabel"
-            hidden$="[[!isVirtualCardEnrolled_(creditCard.metadata)]]">
+            hidden$="[[!shouldShowVirtualCardLabel_(creditCard.metadata)]]">
           $i18n{virtualCardEnabled}
         </span>
         <span class="payments-label"

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

@@ -47,11 +47,23 @@ class SettingsCreditCardListEntryElement extends
         },
         readOnly: true,
       },
+
+      /**
+       * Whether virtual card metadata on settings page is enabled.
+       */
+      virtualCardMetadataEnabled_: {
+        type: Boolean,
+        value() {
+          return loadTimeData.getBoolean('virtualCardMetadataEnabled');
+        },
+        readOnly: true,
+      },
     };
   }
 
   creditCard: chrome.autofillPrivate.CreditCardEntry;
   private virtualCardEnrollmentEnabled_: boolean;
+  private virtualCardMetadataEnabled_: boolean;
 
   /**
    * Opens the credit card action menu.
@@ -121,6 +133,32 @@ class SettingsCreditCardListEntryElement extends
     return this.virtualCardEnrollmentEnabled_ &&
         this.creditCard.metadata!.isVirtualCardEnrolled!;
   }
+
+  private isVirtualCardMetadataEnabled_(): boolean {
+    return this.virtualCardMetadataEnabled_;
+  }
+
+  private shouldShowVirtualCardLabel_(): boolean {
+    return this.isVirtualCardEnrolled_() &&
+        !this.isVirtualCardMetadataEnabled_();
+  }
+
+  private shouldShowSecondarySublabel_(): boolean {
+    return !!(this.creditCard.metadata!.summarySublabel!.trim() !== '' ||
+              this.isVirtualCardEnrolled_() ||
+              this.isVirtualCardEnrollmentEligible_()) &&
+        this.isVirtualCardMetadataEnabled_();
+  }
+
+  private getSecondarySublabel_(): string {
+    if (this.isVirtualCardEnrolled_()) {
+      return this.i18nAdvanced('virtualCardTurnedOn');
+    }
+    if (this.isVirtualCardEnrollmentEligible_()) {
+      return this.i18nAdvanced('virtualCardAvailable');
+    }
+    return this.creditCard.metadata!.summarySublabel!;
+  }
 }
 
 customElements.define(

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

@@ -1287,6 +1287,11 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
               autofill::payments::GetVirtualCardEnrollmentSupportUrl()
                   .spec())));
 
+  html_source->AddBoolean(
+      "virtualCardMetadataEnabled",
+      base::FeatureList::IsEnabled(
+          autofill::features::kAutofillEnableVirtualCardMetadata));
+
   html_source->AddLocalizedStrings(kLocalizedStrings);
 }
 

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

@@ -163,6 +163,7 @@ export function createCreditCardEntry():
       isLocal: true,
       summaryLabel: card + ' ' +
           '****' + cardNumber.substr(-4),
+      summarySublabel: 'Jane Doe',
     },
   };
 }

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

@@ -43,6 +43,7 @@ suite('PaymentsSection', function() {
     loadTimeData.overrideValues({
       migrationEnabled: true,
       virtualCardEnrollmentEnabled: true,
+      virtualCardMetadataEnabled: true,
     });
   });
 
@@ -207,7 +208,7 @@ suite('PaymentsSection', function() {
     assertEquals(
         creditCard.metadata!.summaryLabel,
         rowShadowRoot.querySelector<HTMLElement>(
-                         '#creditCardLabel')!.textContent!.trim());
+                         '#summaryLabel')!.textContent!.trim());
     assertEquals(
         creditCard.expirationMonth + '/' + creditCard.expirationYear,
         rowShadowRoot.querySelector<HTMLElement>(
@@ -305,6 +306,77 @@ suite('PaymentsSection', function() {
         assertFalse(!!outlinkButton);
       });
 
+  test('verifyCreditCardSummarySublabelWhenSublabelIsValid', function() {
+    const creditCard = createCreditCardEntry();
+    creditCard.metadata!.isLocal = false;
+    creditCard.metadata!.isVirtualCardEnrollmentEligible = false;
+    creditCard.metadata!.isVirtualCardEnrolled = false;
+    const section =
+        createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
+
+    const creditCardList = section.$.paymentsList;
+    assertTrue(!!creditCardList);
+    assertEquals(1, getLocalAndServerCreditCardListItems().length);
+    assertFalse(getCardRowShadowRoot(section.$.paymentsList)
+                    .querySelector<HTMLElement>('#summarySublabel')!.hidden);
+  });
+
+  test('verifyCreditCardSummarySublabelWhenSublabelIsInvalid', function() {
+    const creditCard = createCreditCardEntry();
+    creditCard.metadata!.isLocal = false;
+    creditCard.metadata!.isVirtualCardEnrollmentEligible = false;
+    creditCard.metadata!.isVirtualCardEnrolled = false;
+    creditCard.metadata!.summarySublabel = '';
+    const section =
+        createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
+
+    const creditCardList = section.$.paymentsList;
+    assertTrue(!!creditCardList);
+    assertEquals(1, getLocalAndServerCreditCardListItems().length);
+    assertTrue(getCardRowShadowRoot(section.$.paymentsList)
+                   .querySelector<HTMLElement>('#summarySublabel')!.hidden);
+  });
+
+  test('verifyCreditCardSummarySublabelWhenVirtualCardAvailable', function() {
+    const creditCard = createCreditCardEntry();
+    creditCard.metadata!.isLocal = false;
+    creditCard.metadata!.isVirtualCardEnrollmentEligible = true;
+    creditCard.metadata!.isVirtualCardEnrolled = false;
+    const section =
+        createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
+
+    const creditCardList = section.$.paymentsList;
+    assertTrue(!!creditCardList);
+    assertEquals(1, getLocalAndServerCreditCardListItems().length);
+    assertFalse(getCardRowShadowRoot(section.$.paymentsList)
+                    .querySelector<HTMLElement>('#summarySublabel')!.hidden);
+    assertEquals(
+        'Virtual card available',
+        getCardRowShadowRoot(section.$.paymentsList)
+            .querySelector<HTMLElement>(
+                '#summarySublabel')!.textContent!.trim());
+  });
+
+  test('verifyCreditCardSummarySublabelWhenVirtualCardTurnedOn', function() {
+    const creditCard = createCreditCardEntry();
+    creditCard.metadata!.isLocal = false;
+    creditCard.metadata!.isVirtualCardEnrollmentEligible = false;
+    creditCard.metadata!.isVirtualCardEnrolled = true;
+    const section =
+        createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
+
+    const creditCardList = section.$.paymentsList;
+    assertTrue(!!creditCardList);
+    assertEquals(1, getLocalAndServerCreditCardListItems().length);
+    assertFalse(getCardRowShadowRoot(section.$.paymentsList)
+                    .querySelector<HTMLElement>('#summarySublabel')!.hidden);
+    assertEquals(
+        'Virtual card turned on',
+        getCardRowShadowRoot(section.$.paymentsList)
+            .querySelector<HTMLElement>(
+                '#summarySublabel')!.textContent!.trim());
+  });
+
   test('verifyAddVsEditCreditCardTitle', function() {
     const newCreditCard = createEmptyCreditCardEntry();
     const newCreditCardDialog = createCreditCardDialog(newCreditCard);

components/autofill/core/browser/data_model/credit_card.cc

@@ -866,9 +866,7 @@ void CreditCard::SetExpirationDateFromString(const std::u16string& text) {
   SetExpirationYear(num);
 }
 
-const std::pair<std::u16string, std::u16string> CreditCard::LabelPieces()
-    const {
-  std::u16string label;
+std::pair<std::u16string, std::u16string> CreditCard::LabelPieces() const {
   if (number().empty()) {
     // No CC number, if valid nickname is present, return nickname only.
     // Otherwise, return cardholder name only.
@@ -878,22 +876,16 @@ const std::pair<std::u16string, std::u16string> CreditCard::LabelPieces()
     return std::make_pair(name_on_card_, std::u16string());
   }
 
-  std::u16string obfuscated_cc_number =
-      CardIdentifierStringForAutofillDisplay();
-  // No expiration date set.
-  if (!expiration_month_ || !expiration_year_)
-    return std::make_pair(obfuscated_cc_number, std::u16string());
-
-  std::u16string formatted_date = ExpirationDateForDisplay();
-
-  std::u16string separator =
-      l10n_util::GetStringUTF16(IDS_AUTOFILL_ADDRESS_SUMMARY_SEPARATOR);
-  return std::make_pair(obfuscated_cc_number, separator + formatted_date);
+  return std::make_pair(CardIdentifierStringForAutofillDisplay(),
+                        name_on_card_);
 }
 
-const std::u16string CreditCard::Label() const {
+std::u16string CreditCard::Label() const {
   std::pair<std::u16string, std::u16string> pieces = LabelPieces();
-  return pieces.first + pieces.second;
+  if (pieces.first.empty() || pieces.second.empty())
+    return pieces.first + pieces.second;
+
+  return pieces.first + u", " + pieces.second;
 }
 
 std::u16string CreditCard::LastFourDigits() const {

components/autofill/core/browser/data_model/credit_card.h

@@ -275,11 +275,11 @@ class CreditCard : public AutofillDataModel {
 
   // Various display functions.
 
-  // Card preview summary, for example: "Nickname/Network - ****1234",
-  // ", 01/2020".
-  const std::pair<std::u16string, std::u16string> LabelPieces() const;
+  // Card preview summary, for example: "Nickname/Network - ****1234 John
+  // Smith".
+  std::pair<std::u16string, std::u16string> LabelPieces() const;
   // Like LabelPieces, but appends the two pieces together.
-  const std::u16string Label() const;
+  std::u16string Label() const;
   // The last four digits of the card number (or possibly less if there aren't
   // enough characters).
   std::u16string LastFourDigits() const;