make POSInformationCardFieldRowWithToggle

Author: iamgabrielma

Modules/Sources/PointOfSale/Presentation/Settings/POSInformationCardFieldRowWithToggle.swift

@@ -0,0 +1,44 @@
+import SwiftUI
+
+struct POSInformationCardFieldRowWithToggle: View {
+    let label: String
+    let value: String
+    let showSeparator: Bool
+    @Binding var isOn: Bool
+
+    init(label: String,
+         value: String,
+         showSeparator: Bool = true,
+         isOn: Binding<Bool>) {
+        self.label = label
+        self.value = value
+        self.showSeparator = showSeparator
+        self._isOn = isOn
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: POSPadding.small) {
+            HStack(alignment: .center, spacing: POSSpacing.medium) {
+                VStack(alignment: .leading, spacing: POSPadding.small) {
+                    Text(label)
+                        .font(.posBodyMediumRegular())
+                    Text(value)
+                        .font(.posBodyMediumRegular())
+                        .foregroundStyle(.secondary)
+                }
+
+                Spacer()
+
+                Toggle("", isOn: $isOn)
+                    .toggleStyle(SwitchToggleStyle())
+                    .tint(Color.posPrimaryContainer)
+            }
+
+            if showSeparator {
+                Divider()
+                    .padding(.top, POSPadding.small)
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}

Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsLocalCatalogDetailView.swift

@@ -57,14 +57,15 @@ private extension POSSettingsLocalCatalogDetailView {
 
     @ViewBuilder
     var managingDataUsage: some View {
+        @Bindable var viewModel = viewModel
         VStack(spacing: POSSpacing.none) {
             POSInformationCard {
-                POSInformationCardFieldRow(label: Localization.managingDataUsage,
-                                           value: Localization.allowSyncOnCellular,
-                                           showSeparator: false,
-                                           buttonAction: {
-                    viewModel.allowFullSyncOnCellular.toggle()
-                })
+                POSInformationCardFieldRowWithToggle(
+                    label: Localization.managingDataUsage,
+                    value: Localization.allowSyncOnCellular,
+                    showSeparator: false,
+                    isOn: $viewModel.allowFullSyncOnCellular
+                )
             }
         }
     }