Skip to content

Commit 99ed236

Browse files
iamgabrielmaiamgabrielma
authored
[Woo POS][Settings i2] Update designs for detail navigation (#16313)
2 parents 7057f2a + 857b948 commit 99ed236

File tree

3 files changed

+68
-163
lines changed

3 files changed

+68
-163
lines changed

‎Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsCardView.swift‎ renamed to ‎Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsCard.swift‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import SwiftUI
22

3-
struct POSSettingsCardView: View {
3+
struct POSSettingsCard: View {
44
let title: String
55
let subtitle: String
66
let isSelected: Bool
77
let action: () -> Void
88

9+
init(title: String, subtitle: String, isSelected: Bool = false, action: @escaping () -> Void) {
10+
self.title = title
11+
self.subtitle = subtitle
12+
self.isSelected = isSelected
13+
self.action = action
14+
}
15+
916
var body: some View {
1017
Button(action: action) {
1118
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
@@ -36,11 +43,19 @@ struct POSSettingsCardView: View {
3643

3744
#if DEBUG
3845
#Preview {
39-
POSSettingsCardView(
40-
title: "Documentation",
41-
subtitle: "Learn more about accepting mobile payments",
42-
isSelected: true,
43-
action: { }
44-
)
46+
VStack {
47+
POSSettingsCard(
48+
title: "Documentation",
49+
subtitle: "Learn more about accepting mobile payments",
50+
isSelected: true,
51+
action: { }
52+
)
53+
POSSettingsCard(
54+
title: "Documentation",
55+
subtitle: "Learn more about accepting mobile payments",
56+
isSelected: false,
57+
action: { }
58+
)
59+
}
4560
}
4661
#endif

‎Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsHardwareDetailView.swift‎

Lines changed: 43 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import struct WooFoundation.SafariView
33

44
struct POSSettingsHardwareDetailView: View {
55
@Environment(PointOfSaleAggregateModel.self) private var posModel
6-
@Environment(\.posFeatureFlags) private var featureFlags
7-
@Environment(\.dynamicTypeSize) private var dynamicTypeSize
86
@Environment(\.posAnalytics) private var analytics
97
@Environment(\.posExternalViews) private var externalViews
108

@@ -40,46 +38,42 @@ struct POSSettingsHardwareDetailView: View {
4038
var body: some View {
4139
@Bindable var posModel = posModel
4240
NavigationStack(path: $navigationPath) {
43-
POSPageHeaderView(title: Localization.hardwareTitle)
44-
.foregroundColor(.posSurface)
45-
.accessibilityAddTraits(.isHeader)
46-
47-
List(HardwareDestination.allCases) { destination in
48-
NavigationLink(value: NavigationDestination.hardware(destination)) {
49-
HStack(spacing: POSSpacing.medium) {
50-
Image(systemName: destination.icon)
51-
.font(.posBodyLargeRegular())
52-
.accessibilityHidden(true)
53-
.renderedIf(!dynamicTypeSize.isAccessibilitySize)
54-
55-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
56-
Text(destination.title)
57-
.font(.posBodyLargeRegular())
58-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
59-
Text(destination.subtitle)
60-
.font(.posBodyMediumRegular())
61-
.foregroundStyle(.secondary)
62-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
41+
VStack(spacing: POSSpacing.none) {
42+
POSPageHeaderView(title: Localization.hardwareTitle)
43+
.foregroundColor(.posSurface)
44+
.accessibilityAddTraits(.isHeader)
45+
46+
VStack(spacing: POSSpacing.small) {
47+
ForEach(HardwareDestination.allCases) { destination in
48+
NavigationLink(value: NavigationDestination.hardware(destination)) {
49+
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
50+
Text(destination.title)
51+
.font(.posBodyLargeBold)
52+
.foregroundStyle(Color.posOnSurface)
53+
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
54+
Text(destination.subtitle)
55+
.font(.posBodyMediumRegular())
56+
.foregroundStyle(.secondary)
57+
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
58+
}
59+
.padding()
60+
.frame(maxWidth: .infinity, alignment: .leading)
61+
.background(Color.posSurfaceContainerLowest)
62+
.posItemCardBorderStyles()
6363
}
64-
Spacer()
64+
.buttonStyle(.plain)
65+
.accessibilityLabel("\(destination.title), \(destination.subtitle)")
6566
}
6667
}
67-
.listRowSeparator(.hidden)
68+
.padding(.horizontal, POSPadding.medium)
69+
70+
Spacer()
6871
}
69-
.listStyle(.plain)
70-
.scrollContentBackground(.hidden)
7172
.background(backgroundColor)
72-
.listRowBackground(Color.clear)
73-
.listRowSeparator(.hidden)
7473
.navigationDestination(for: NavigationDestination.self) { destination in
7574
switch destination {
7675
case .hardware(.cardReaders):
77-
if featureFlags.isFeatureFlagEnabled(.pointOfSaleSettingsCardReaderFlow) {
78-
cardReadersView
79-
} else {
80-
// TODO: Legacy view to be removed along feature flag on WOOMOB-1591
81-
legacyCardReadersView
82-
}
76+
cardReadersView
8377
case .hardware(.scanners):
8478
scannersView
8579
}
@@ -128,7 +122,7 @@ private extension POSSettingsHardwareDetailView {
128122
}
129123

130124
var supportForm: some View {
131-
NavigationView {
125+
NavigationStack {
132126
externalViews.createSupportFormView(isPresented: $showSupport, sourceTag: Constants.supportTag)
133127
.toolbar {
134128
ToolbarItem(placement: .cancellationAction) {
@@ -138,76 +132,6 @@ private extension POSSettingsHardwareDetailView {
138132
}
139133
}
140134
}
141-
.navigationViewStyle(.stack)
142-
}
143-
144-
var legacyCardReadersView: some View {
145-
VStack(spacing: POSSpacing.none) {
146-
POSPageHeaderView(
147-
title: Localization.cardReadersTitle,
148-
backButtonConfiguration: .init(state: .enabled, action: {
149-
navigationPath.removeLast()
150-
}, buttonIcon: "chevron.left"))
151-
.foregroundColor(.posSurface)
152-
153-
List {
154-
VStack(spacing: POSPadding.xSmall) {
155-
HStack {
156-
Text(Localization.readerModelTitle)
157-
.font(.posBodyMediumRegular())
158-
.foregroundStyle(.primary)
159-
Spacer()
160-
Text(cardReaderName)
161-
.font(.posBodyMediumRegular())
162-
.foregroundStyle(.secondary)
163-
}
164-
.padding()
165-
HStack {
166-
Text(Localization.readerBatteryTitle)
167-
.font(.posBodyMediumRegular())
168-
.foregroundStyle(.primary)
169-
Spacer()
170-
Text(formattedBatteryLevel)
171-
.font(.posBodyMediumRegular())
172-
.foregroundStyle(.secondary)
173-
}
174-
.padding()
175-
}
176-
Button {
177-
showCardReaderDocumentationModal = true
178-
} label: {
179-
HStack(spacing: POSSpacing.medium) {
180-
Image(systemName: "doc.text")
181-
.font(.posBodyLargeRegular())
182-
.accessibilityHidden(true)
183-
.renderedIf(!dynamicTypeSize.isAccessibilitySize)
184-
185-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
186-
Text(Localization.cardReaderDocumentationTitle)
187-
.font(.posBodyLargeRegular())
188-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
189-
Text(Localization.cardReaderDocumentationSubtitle)
190-
.font(.posBodyMediumRegular())
191-
.foregroundStyle(.secondary)
192-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
193-
}
194-
Spacer()
195-
}
196-
}
197-
.padding()
198-
.accessibilityAddTraits(.isButton)
199-
.listRowSeparator(.hidden)
200-
}
201-
.listStyle(.plain)
202-
.scrollContentBackground(.hidden)
203-
.listRowBackground(Color.clear)
204-
.background(backgroundColor)
205-
.foregroundColor(.posOnSurface)
206-
}
207-
.navigationBarBackButtonHidden(true)
208-
.posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
209-
SafariView(url: POSConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
210-
}
211135
}
212136

213137
var cardReadersView: some View {
@@ -241,17 +165,15 @@ private extension POSSettingsHardwareDetailView {
241165
}
242166
.font(.posBodyMediumRegular())
243167
} else {
244-
POSSettingsCardView(title: Localization.cardReaderConnectTitle,
168+
POSSettingsCard(title: Localization.cardReaderConnectTitle,
245169
subtitle: Localization.cardReaderConnectSubtitle,
246-
isSelected: false, // Temporary. Update with WOOMOB-1571
247170
action: {
248171
posModel.connectCardReader()
249172
})
250173
}
251174

252-
POSSettingsCardView(title: Localization.cardReaderDocumentationTitle,
175+
POSSettingsCard(title: Localization.cardReaderDocumentationTitle,
253176
subtitle: Localization.cardReaderDocumentationSubtitle,
254-
isSelected: false, // Temporary. Update with WOOMOB-1571
255177
action: { showCardReaderDocumentationModal = true })
256178
.accessibilityAddTraits(.isButton)
257179
.listRowSeparator(.hidden)
@@ -277,36 +199,22 @@ private extension POSSettingsHardwareDetailView {
277199
}, buttonIcon: "chevron.left"))
278200
.foregroundColor(.posSurface)
279201

280-
List(ScannerDestination.allCases) { destination in
281-
Button {
282-
handleScannerDestination(destination)
283-
} label: {
284-
HStack(spacing: POSSpacing.medium) {
285-
Image(systemName: destination.icon)
286-
.font(.posBodyLargeRegular())
287-
.accessibilityHidden(true)
288-
.renderedIf(!dynamicTypeSize.isAccessibilitySize)
289-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
290-
Text(destination.title)
291-
.font(.posBodyLargeRegular())
292-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
293-
Text(destination.subtitle)
294-
.font(.posBodyMediumRegular())
295-
.foregroundStyle(.secondary)
296-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
202+
VStack(spacing: POSSpacing.small) {
203+
ForEach(ScannerDestination.allCases) { destination in
204+
POSSettingsCard(
205+
title: destination.title,
206+
subtitle: destination.subtitle,
207+
action: {
208+
handleScannerDestination(destination)
297209
}
298-
Spacer()
299-
}
210+
)
300211
}
301-
.accessibilityAddTraits(.isButton)
302-
.listRowSeparator(.hidden)
303212
}
304-
.listStyle(.plain)
305-
.scrollContentBackground(.hidden)
306-
.listRowBackground(Color.clear)
307-
.background(backgroundColor)
308-
.foregroundColor(.posOnSurface)
213+
.padding(.horizontal, POSPadding.medium)
214+
215+
Spacer()
309216
}
217+
.background(backgroundColor)
310218
.navigationBarBackButtonHidden(true)
311219
}
312220
}
@@ -336,15 +244,6 @@ private extension POSSettingsHardwareDetailView {
336244
return Localization.hardwareNavigationBarcodeSubtitle
337245
}
338246
}
339-
340-
var icon: String {
341-
switch self {
342-
case .cardReaders:
343-
return "creditcard"
344-
case .scanners:
345-
return "qrcode.viewfinder"
346-
}
347-
}
348247
}
349248

350249
enum NavigationDestination: Hashable {
@@ -374,15 +273,6 @@ private extension POSSettingsHardwareDetailView {
374273
return Localization.scannerDocumentationSubtitle
375274
}
376275
}
377-
378-
var icon: String {
379-
switch self {
380-
case .setup:
381-
return "gearshape"
382-
case .documentation:
383-
return "doc.text"
384-
}
385-
}
386276
}
387277

388278
func handleScannerDestination(_ destination: ScannerDestination) {

‎Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsView.swift‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,22 +36,22 @@ extension POSSettingsView {
3636
.accessibilityAddTraits(.isHeader)
3737

3838
VStack(spacing: POSSpacing.small) {
39-
POSSettingsCardView(title: POSSettingsView.SidebarNavigation.store.title,
39+
POSSettingsCard(title: POSSettingsView.SidebarNavigation.store.title,
4040
subtitle: POSSettingsView.SidebarNavigation.store.subtitle,
4141
isSelected: selection == .store,
4242
action: {
4343
analytics.track(.pointOfSaleSettingsStoreDetailsTapped)
4444
selection = .store
4545
})
46-
POSSettingsCardView(title: POSSettingsView.SidebarNavigation.hardware.title,
46+
POSSettingsCard(title: POSSettingsView.SidebarNavigation.hardware.title,
4747
subtitle: POSSettingsView.SidebarNavigation.hardware.subtitle,
4848
isSelected: selection == .hardware,
4949
action: {
5050
analytics.track(.pointOfSaleSettingsHardwareTapped)
5151
selection = .hardware
5252
})
5353
if settingsController.isLocalCatalogEligible {
54-
POSSettingsCardView(title: POSSettingsView.SidebarNavigation.localCatalog.title,
54+
POSSettingsCard(title: POSSettingsView.SidebarNavigation.localCatalog.title,
5555
subtitle: POSSettingsView.SidebarNavigation.localCatalog.subtitle,
5656
isSelected: selection == .localCatalog,
5757
action: {

0 commit comments

Comments
 (0)