[Credit cards] Turn the "Sync cards across devices" button into a "Sync cards" toggle

[gabrielluong]

In the current "Credit cards" settings, we have a summary label that displays the status of the sync authentication. This is done by SyncPreferenceView and also used in "Logins and passwords" setting.

We want to implement some UI changes that you can see in the attached screenshot. In particular, we want to remove the summary label in SyncPreferenceView for both credit cards and logins. Instead of showing that sync is on/off when you are logged into sync, we want a toggle.

The initial label should still read "Sync cards across devices". We also want to mirror this label in "Logins and passwords" by renaming it to "Sync logins across devices". When the user is logged into sync, we change the label text to "Sync cards".

┆Issue is synchronized with this Jira Task

[violasong]

Received approval from Design Systems for this workflow.

(To clarify one thing - if a user is already signed in, they'll see the "Sync cards" with toggle view)

[codrut-topliceanu]

@gabrielluong @violasong Some questions:

1. When the user is signed in and the preference is a toggle( set to "Sync cards"), what does clicking on the preference/toggle do? Does it :
   a) change the state of the toggle
   OR
   b) does it take the user to account settings?
   Same question for Saved Logins.
2. If a is true, does that mean we will have 3 the sync settings spread across 3 screens? (Account settings, Logins and passwords, Credit cards)
3. If b is true, should we add a "Sync Cards" checkbox in Account Settings that will control the toggle of the switch from Credit Cards?

[gabrielluong]

@gabrielluong @violasong Some questions:

1. When the user is signed in and the preference is a toggle( set to "Sync cards"), what does clicking on the preference/toggle do? Does it :
   a) change the state of the toggle
   OR
   b) does it take the user to account settings?
   Same question for Saved Logins.

Since it's a Sync Cards toggle, it should just trigger the toggling on/off of the credit card syncing. However, syncing of credit card is not yet available with our current version of AS, so we should just use a dummy filler like syncing login for the meantime.

I am aware that there could be an intermittent state where you will need to reconnect to authenticate your sync account. I don't think we want to lose that, but it is also not presented in the designs here as well. If you can preserve that and add a screenshot of that state, we can work with UX on finalizing a string for it. However, it is possible we just default back to the original "Sync cards across devices" string, but we should double check with UX.

2. If a is true, does that mean we will have 3 the sync settings spread across 3 screens? (Account settings, Logins and passwords, Credit cards)

I guess this is true.

3. If b is true, should we add a "Sync Cards" checkbox in Account Settings that will control the toggle of the switch from Credit Cards?

We will expect to add a "Sync Cards" checkbox in Account Settings. We don't have the AS functionality yet. So, we can do this as a follow up. I think I already have an issue for this that I will move to the backlog when AS is available.

[sflorean]

Verified as fixed on Nightly 5/7 with Samsung Note 10 (Android 11).
Sync logins and Sync cards is displayed with a toggle, after the user is connected with a Fx account.

Going back to settings and again to Credit cards, changes the toggle from ON to OFF. Not sure if this will be implemented/it is a known issue.

cc @gabrielluong @codrut-topliceanu