Skip to content

Commit 0e41dac

Browse files
iamgabrielmaiamgabrielma
authored
[Woo POS][Settings i2] Update designs for sidebar navigation (#16312)
2 parents 550dd42 + 802978f commit 0e41dac

File tree

4 files changed

+68
-92
lines changed

4 files changed

+68
-92
lines changed

‎Modules/Sources/PointOfSale/Presentation/PointOfSaleDashboardView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ struct PointOfSaleDashboardView: View {
139139
documentationView
140140
}
141141
.posFullScreenCover(isPresented: $showSettings) {
142-
PointOfSaleSettingsView(settingsController: posModel.settingsController)
142+
POSSettingsView(settingsController: posModel.settingsController)
143143
}
144144
.onChange(of: posModel.entryPointController.eligibilityState) { oldValue, newValue in
145145
guard newValue == .eligible else { return }

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import SwiftUI
33
struct POSSettingsCardView: View {
44
let title: String
55
let subtitle: String
6+
let isSelected: Bool
67
let action: () -> Void
78

89
var body: some View {
910
Button(action: action) {
1011
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
1112
Text(title)
12-
.font(.posBodyLargeRegular())
13+
.font(.posBodyLargeBold)
1314
.foregroundStyle(Color.posOnSurface)
1415
Text(subtitle)
1516
.font(.posBodyMediumRegular())
@@ -20,6 +21,12 @@ struct POSSettingsCardView: View {
2021
.background(Color.posSurfaceContainerLowest)
2122
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
2223
.posItemCardBorderStyles()
24+
.overlay {
25+
if isSelected {
26+
RoundedRectangle(cornerRadius: POSCornerRadiusStyle.medium.value)
27+
.stroke(Color.posOnSurface, lineWidth: 2)
28+
}
29+
}
2330
}
2431
.buttonStyle(.plain)
2532
.accessibilityAddTraits(.isButton)
@@ -32,6 +39,7 @@ struct POSSettingsCardView: View {
3239
POSSettingsCardView(
3340
title: "Documentation",
3441
subtitle: "Learn more about accepting mobile payments",
42+
isSelected: true,
3543
action: { }
3644
)
3745
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,13 +243,15 @@ private extension POSSettingsHardwareDetailView {
243243
} else {
244244
POSSettingsCardView(title: Localization.cardReaderConnectTitle,
245245
subtitle: Localization.cardReaderConnectSubtitle,
246+
isSelected: false, // Temporary. Update with WOOMOB-1571
246247
action: {
247248
posModel.connectCardReader()
248249
})
249250
}
250251

251252
POSSettingsCardView(title: Localization.cardReaderDocumentationTitle,
252253
subtitle: Localization.cardReaderDocumentationSubtitle,
254+
isSelected: false, // Temporary. Update with WOOMOB-1571
253255
action: { showCardReaderDocumentationModal = true })
254256
.accessibilityAddTraits(.isButton)
255257
.listRowSeparator(.hidden)

‎Modules/Sources/PointOfSale/Presentation/Settings/PointOfSaleSettingsView.swift‎ renamed to ‎Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsView.swift‎

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

3-
struct PointOfSaleSettingsView: View {
3+
struct POSSettingsView: View {
44
@Environment(\.dismiss) private var dismiss
55
@Environment(\.posAnalytics) private var analytics
66
@State private var selection: SidebarNavigation? = .store
@@ -20,7 +20,7 @@ struct PointOfSaleSettingsView: View {
2020
}
2121
}
2222

23-
extension PointOfSaleSettingsView {
23+
extension POSSettingsView {
2424
@ViewBuilder
2525
private var listView: some View {
2626
VStack(alignment: .leading, spacing: POSSpacing.none) {
@@ -31,49 +31,36 @@ extension PointOfSaleSettingsView {
3131
analytics.track(.pointOfSaleSettingsCloseButtonTapped)
3232
dismiss()
3333
},
34-
buttonIcon: "xmark"))
34+
buttonIcon: "chevron.left"))
3535
.foregroundColor(.posSurface)
3636
.accessibilityAddTraits(.isHeader)
3737

3838
VStack(spacing: POSSpacing.small) {
39-
PointOfSaleSettingsCard(
40-
item: .store,
41-
isSelected: selection == .store,
42-
onTap: {
43-
analytics.track(.pointOfSaleSettingsStoreDetailsTapped)
44-
selection = .store
45-
}
46-
)
47-
48-
PointOfSaleSettingsCard(
49-
item: .hardware,
50-
isSelected: selection == .hardware,
51-
onTap: {
52-
analytics.track(.pointOfSaleSettingsHardwareTapped)
53-
selection = .hardware
54-
}
55-
)
56-
39+
POSSettingsCardView(title: POSSettingsView.SidebarNavigation.store.title,
40+
subtitle: POSSettingsView.SidebarNavigation.store.subtitle,
41+
isSelected: selection == .store,
42+
action: {
43+
analytics.track(.pointOfSaleSettingsStoreDetailsTapped)
44+
selection = .store
45+
})
46+
POSSettingsCardView(title: POSSettingsView.SidebarNavigation.hardware.title,
47+
subtitle: POSSettingsView.SidebarNavigation.hardware.subtitle,
48+
isSelected: selection == .hardware,
49+
action: {
50+
analytics.track(.pointOfSaleSettingsHardwareTapped)
51+
selection = .hardware
52+
})
5753
if settingsController.isLocalCatalogEligible {
58-
PointOfSaleSettingsCard(
59-
item: .localCatalog,
60-
isSelected: selection == .localCatalog,
61-
onTap: {
62-
selection = .localCatalog
63-
}
64-
)
54+
POSSettingsCardView(title: POSSettingsView.SidebarNavigation.localCatalog.title,
55+
subtitle: POSSettingsView.SidebarNavigation.localCatalog.subtitle,
56+
isSelected: selection == .localCatalog,
57+
action: {
58+
selection = .localCatalog
59+
})
6560
}
66-
6761
Spacer()
6862

69-
PointOfSaleSettingsCard(
70-
item: .help,
71-
isSelected: selection == .help,
72-
onTap: {
73-
analytics.track(.pointOfSaleSettingsHelpTapped)
74-
selection = .help
75-
}
76-
)
63+
helpView
7764
}
7865
.padding(.horizontal, POSPadding.medium)
7966
}
@@ -99,62 +86,41 @@ extension PointOfSaleSettingsView {
9986
EmptyView()
10087
}
10188
}
102-
}
103-
104-
extension PointOfSaleSettingsView {
105-
enum Constants {
106-
static let sidebarWidthFraction: CGFloat = 0.35
107-
}
108-
}
109-
110-
struct PointOfSaleSettingsCard: View {
111-
@Environment(\.dynamicTypeSize) private var dynamicTypeSize
112-
@Environment(\.colorScheme) private var colorScheme
11389

114-
let item: PointOfSaleSettingsView.SidebarNavigation
115-
let isSelected: Bool
116-
let onTap: () -> Void
117-
118-
private var selectionBackgroundColor: Color {
119-
guard isSelected else { return Color.clear }
120-
return colorScheme == .dark ? Color.posPrimary : Color.posSecondary
121-
}
122-
123-
var body: some View {
124-
Button(action: onTap) {
125-
HStack(spacing: POSSpacing.medium) {
126-
Image(systemName: item.icon)
127-
.font(.posBodyLargeRegular())
128-
.foregroundStyle(Color.posOnSurface)
129-
.accessibilityHidden(true)
130-
.renderedIf(!dynamicTypeSize.isAccessibilitySize)
131-
132-
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
133-
Text(item.title)
134-
.font(.posBodyLargeRegular())
135-
.foregroundStyle(Color.posOnSurface)
136-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
137-
Text(item.subtitle)
138-
.font(.posBodyMediumRegular())
90+
@ViewBuilder
91+
private var helpView: some View {
92+
Button {
93+
analytics.track(.pointOfSaleSettingsHelpTapped)
94+
selection = .help
95+
} label: {
96+
HStack(spacing: POSSpacing.small) {
97+
if let icon = SidebarNavigation.help.icon {
98+
Image(systemName: icon)
99+
.font(.posBodyMediumBold)
139100
.foregroundStyle(Color.posOnSurface)
140-
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
141101
}
142-
Spacer()
102+
Text(SidebarNavigation.help.title)
103+
.font(.posBodyMediumBold)
104+
.foregroundStyle(Color.posOnSurface)
143105
}
144-
.padding(.vertical, POSPadding.small)
145-
.padding(.horizontal, POSPadding.medium)
106+
.padding()
107+
.frame(maxWidth: .infinity, alignment: .leading)
108+
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
146109
.contentShape(Rectangle())
147110
}
148111
.buttonStyle(.plain)
149112
.accessibilityAddTraits(.isButton)
150-
.background(
151-
RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value, style: .continuous)
152-
.fill(selectionBackgroundColor)
153-
)
113+
.accessibilityLabel(SidebarNavigation.help.title)
154114
}
155115
}
156116

157-
extension PointOfSaleSettingsView {
117+
extension POSSettingsView {
118+
enum Constants {
119+
static let sidebarWidthFraction: CGFloat = 0.35
120+
}
121+
}
122+
123+
extension POSSettingsView {
158124
enum SidebarNavigation: String, CaseIterable, Identifiable {
159125
case store
160126
case hardware
@@ -181,12 +147,12 @@ extension PointOfSaleSettingsView {
181147
}
182148
}
183149

184-
var icon: String {
150+
var icon: String? {
185151
switch self {
186-
case .store: return "bag"
187-
case .hardware: return "wrench.and.screwdriver"
188-
case .localCatalog: return "internaldrive"
189-
case .help: return "questionmark.circle"
152+
case .store, .hardware, .localCatalog:
153+
return nil
154+
case .help:
155+
return "questionmark.circle"
190156
}
191157
}
192158
}
@@ -211,8 +177,8 @@ extension PointOfSaleSettingsView {
211177
)
212178

213179
static let sidebarNavigationHelpTitle = NSLocalizedString(
214-
"pointOfSaleSettingsView.sidebarNavigationHelpTitle",
215-
value: "Help",
180+
"pointOfSaleSettingsView.sidebarNavigationHelpTitle.1",
181+
value: "Get help and support",
216182
comment: "Title of the Help section within Point of Sale settings."
217183
)
218184

@@ -250,6 +216,6 @@ extension PointOfSaleSettingsView {
250216

251217
#if DEBUG
252218
#Preview {
253-
PointOfSaleSettingsView(settingsController: POSSettingsPreviewController())
219+
POSSettingsView(settingsController: POSSettingsPreviewController())
254220
}
255221
#endif

0 commit comments

Comments
 (0)