[fenix] For https://github.com/mozilla-mobile/fenix/issues/18242 - Wire up "Sync cards across devices" preference with SyncPreferenceView (https://github.com/mozilla-mobile/fenix/pull/18605)

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

@@ -5,9 +5,14 @@
 package org.mozilla.fenix.settings.creditcards
 
 import android.os.Bundle
+import androidx.navigation.fragment.findNavController
 import androidx.preference.PreferenceFragmentCompat
+import mozilla.components.service.fxa.SyncEngine
 import org.mozilla.fenix.R
+import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.ext.showToolbar
+import org.mozilla.fenix.settings.SyncPreferenceView
+import org.mozilla.fenix.settings.requirePreference
 
 /**
  * "Credit cards" settings fragment displays a list of settings related to autofilling, adding and
@@ -23,5 +28,27 @@ class CreditCardsSettingFragment : PreferenceFragmentCompat() {
         super.onResume()
 
         showToolbar(getString(R.string.preferences_credit_cards))
+
+        SyncPreferenceView(
+            syncPreference = requirePreference(R.string.pref_key_credit_cards_sync_cards_across_devices),
+            lifecycleOwner = viewLifecycleOwner,
+            accountManager = requireComponents.backgroundServices.accountManager,
+            syncEngine = SyncEngine.Passwords,
+            onSignInToSyncClicked = {
+                val directions =
+                    CreditCardsSettingFragmentDirections.actionCreditCardsSettingFragmentToTurnOnSyncFragment()
+                findNavController().navigate(directions)
+            },
+            onSyncStatusClicked = {
+                val directions =
+                    CreditCardsSettingFragmentDirections.actionGlobalAccountSettingsFragment()
+                findNavController().navigate(directions)
+            },
+            onReconnectClicked = {
+                val directions =
+                    CreditCardsSettingFragmentDirections.actionGlobalAccountProblemFragment()
+                findNavController().navigate(directions)
+            }
+        )
     }
 }

app/src/main/res/navigation/nav_graph.xml

@@ -1008,6 +1008,13 @@
             android:id="@+id/creditCardsSettingFragment"
             android:name="org.mozilla.fenix.settings.creditcards.CreditCardsSettingFragment"
             android:label="@string/preferences_credit_cards">
+            <action
+                android:id="@+id/action_creditCardsSettingFragment_to_turnOnSyncFragment"
+                app:destination="@id/turnOnSyncFragment"
+                app:enterAnim="@anim/slide_in_right"
+                app:exitAnim="@anim/slide_out_left"
+                app:popEnterAnim="@anim/slide_in_left"
+                app:popExitAnim="@anim/slide_out_right" />
         </fragment>
     </navigation>
 </navigation>