[Saved cards] Display the obfuscated credit card numbers in Saved cards

[gabrielluong]

See #18270 (comment) for the latest.

When mozilla-mobile/android-components#9804 is available, we should use obfuscatedCardNumber provided when display the obfuscated credit card numbers in the "Saved cards" screen.

This depends on #18268 and mozilla-mobile/android-components#9804

┆Issue is synchronized with this Jira Task

[gabrielluong]

Currently, we show the encrypted card number here

fenix/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorState.kt

Line 41 in 4e16c46

cardNumber = encryptedCardNumber.number,

We should change this to display the cardNumberLast4 https://github.com/mozilla-mobile/android-components/blob/7425e13d075f737f548e3cecd04446628afa8c12/components/concept/storage/src/main/java/mozilla/components/concept/storage/CreditCardsAddressesStorage.kt#L147

In doing so, we should also add the necessary 4 dots ellipsis in front of the last 4 card number. See Chromium's unicode that is used for 4 dots ellipsis. https://github.com/chromium/chromium/blob/d7da0240cae77824d1eda25745c4022757499131/chrome/android/javatests/src/org/chromium/chrome/browser/autofill/PersonalDataManagerTest.java#L153-L159. We can potentially just add the unicode to the CreditCardEditorState here as the cardNumber. Alternatively, we should also highly consider adding a helper method in AC to provide this obfuscated card number (last 4 card number + 4 dots ellipsis) so that it can be used everywhere including the select credit card prompts.

We should examine the 4 dots ellipsis used in Chromium and see what we do in Edit Logins to see if we should align. Otherwise, I am interested to know if the \u202A is the Left-To-Right Embedding (LTE) mark, and // \u202C is the Pop Directional Formatting (PDF) mark are helpful for RTL and different locale support.

We can't show "Visa", "Amex", the credit card issuers yet until mozilla-mobile/android-components#9813 is done. So, that will be out of scope. We just want to display the obfuscated card number in this issue and clean up our CreditCardEditorState state with this issue. Please also update the relevant tests.

[abodea]

Verified as fixed on the latest Nightly 5/26 with OnePlus Nord (Android 10).
Note that the icons are still not displayed but I mentioned this issue here #18279 (comment).

And the credit card number is still displayed #19482 Encrypted... but that bug was close in favor of this one.

So I was thinking should we re-open because when tapping on a credit card the encrypted number is still displayed, or should I open a new bug?

[gabrielluong]

Verified as fixed on the latest Nightly 5/26 with OnePlus Nord (Android 10).
Note that the icons are still not displayed but I mentioned this issue here #18279 (comment).

And the credit card number is still displayed #19482 Encrypted... but that bug was close in favor of this one.

So I was thinking should we re-open because when tapping on a credit card the encrypted number is still displayed, or should I open a new bug?

We got mozilla-mobile/android-components#10333 for displaying the decrypted card number

[abodea]

Verified as fixed on the latest Nightly 5/26 with OnePlus Nord (Android 10).
Note that the icons are still not displayed but I mentioned this issue here #18279 (comment).
And the credit card number is still displayed #19482 Encrypted... but that bug was close in favor of this one.
So I was thinking should we re-open because when tapping on a credit card the encrypted number is still displayed, or should I open a new bug?

We got mozilla-mobile/android-components#10333 for displaying the decrypted card number

Thank you @gabrielluong thank I think we are all good on this side, waiting on that to be fixed so I will confirm it!