Skip to content

[Woo POS][Settings i2] Update designs for detail navigation #16313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 5, 2025
Merged

[Woo POS][Settings i2] Update designs for detail navigation #16313

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e65fc5b
use Vstack rather than List to remove oddness when tapping
iamgabrielma Nov 4, 2025
a0faa8c
prevent NavigationLink from applying its default text color styling
iamgabrielma Nov 4, 2025
48a0747
remove legacyCardReadersView
iamgabrielma Nov 4, 2025
9a4a360
update scannersView
iamgabrielma Nov 4, 2025
ed31715
make isSelected default to false
iamgabrielma Nov 4, 2025
2841333
remove unused
iamgabrielma Nov 4, 2025
c6cb1df
rename POSSettingsCard
iamgabrielma Nov 5, 2025
857b948
Update NavigationView usage to NavigationStack
iamgabrielma Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 21 additions & 6 deletions Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsCardView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ struct POSSettingsCardView: View {
let isSelected: Bool
let action: () -> Void

init(title: String, subtitle: String, isSelected: Bool = false, action: @escaping () -> Void) {
self.title = title
self.subtitle = subtitle
self.isSelected = isSelected
self.action = action
}

var body: some View {
Button(action: action) {
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Expand Down Expand Up @@ -36,11 +43,19 @@ struct POSSettingsCardView: View {

#if DEBUG
#Preview {
POSSettingsCardView(
title: "Documentation",
subtitle: "Learn more about accepting mobile payments",
isSelected: true,
action: { }
)
VStack {
POSSettingsCardView(
title: "Documentation",
subtitle: "Learn more about accepting mobile payments",
isSelected: true,
action: { }
)
POSSettingsCardView(
title: "Documentation",
subtitle: "Learn more about accepting mobile payments",
isSelected: false,
action: { }
)
}
}
#endif
189 changes: 40 additions & 149 deletions Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsHardwareDetailView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import struct WooFoundation.SafariView

struct POSSettingsHardwareDetailView: View {
@Environment(PointOfSaleAggregateModel.self) private var posModel
@Environment(\.posFeatureFlags) private var featureFlags
@Environment(\.dynamicTypeSize) private var dynamicTypeSize
@Environment(\.posAnalytics) private var analytics
@Environment(\.posExternalViews) private var externalViews

Expand Down Expand Up @@ -40,46 +38,42 @@ struct POSSettingsHardwareDetailView: View {
var body: some View {
@Bindable var posModel = posModel
NavigationStack(path: $navigationPath) {
POSPageHeaderView(title: Localization.hardwareTitle)
.foregroundColor(.posSurface)
.accessibilityAddTraits(.isHeader)

List(HardwareDestination.allCases) { destination in
NavigationLink(value: NavigationDestination.hardware(destination)) {
HStack(spacing: POSSpacing.medium) {
Image(systemName: destination.icon)
.font(.posBodyLargeRegular())
.accessibilityHidden(true)
.renderedIf(!dynamicTypeSize.isAccessibilitySize)

VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Text(destination.title)
.font(.posBodyLargeRegular())
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
Text(destination.subtitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
VStack(spacing: POSSpacing.none) {
POSPageHeaderView(title: Localization.hardwareTitle)
.foregroundColor(.posSurface)
.accessibilityAddTraits(.isHeader)

VStack(spacing: POSSpacing.small) {
ForEach(HardwareDestination.allCases) { destination in
NavigationLink(value: NavigationDestination.hardware(destination)) {
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Text(destination.title)
.font(.posBodyLargeBold)
.foregroundStyle(Color.posOnSurface)
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
Text(destination.subtitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color.posSurfaceContainerLowest)
.posItemCardBorderStyles()
}
Spacer()
.buttonStyle(.plain)
.accessibilityLabel("\(destination.title), \(destination.subtitle)")
}
}
.listRowSeparator(.hidden)
.padding(.horizontal, POSPadding.medium)

Spacer()
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.background(backgroundColor)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.navigationDestination(for: NavigationDestination.self) { destination in
switch destination {
case .hardware(.cardReaders):
if featureFlags.isFeatureFlagEnabled(.pointOfSaleSettingsCardReaderFlow) {
cardReadersView
} else {
// TODO: Legacy view to be removed along feature flag on WOOMOB-1591
legacyCardReadersView
}
cardReadersView
case .hardware(.scanners):
scannersView
}
Expand Down Expand Up @@ -141,75 +135,6 @@ private extension POSSettingsHardwareDetailView {
.navigationViewStyle(.stack)
Copy link
Contributor

@joshheald joshheald Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Preexisting, but just spotted this – support form should use a NavigationStack as NavigationView is deprecated.

Copy link
Contributor Author

@iamgabrielma iamgabrielma Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, updated on 857b948

I don't get warnings of this one, but seems we use it 75 more times across the app 😨 , will log it into the iOS17+ updates project

}

var legacyCardReadersView: some View {
VStack(spacing: POSSpacing.none) {
POSPageHeaderView(
title: Localization.cardReadersTitle,
backButtonConfiguration: .init(state: .enabled, action: {
navigationPath.removeLast()
}, buttonIcon: "chevron.left"))
.foregroundColor(.posSurface)

List {
VStack(spacing: POSPadding.xSmall) {
HStack {
Text(Localization.readerModelTitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.primary)
Spacer()
Text(cardReaderName)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
}
.padding()
HStack {
Text(Localization.readerBatteryTitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.primary)
Spacer()
Text(formattedBatteryLevel)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
}
.padding()
}
Button {
showCardReaderDocumentationModal = true
} label: {
HStack(spacing: POSSpacing.medium) {
Image(systemName: "doc.text")
.font(.posBodyLargeRegular())
.accessibilityHidden(true)
.renderedIf(!dynamicTypeSize.isAccessibilitySize)

VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Text(Localization.cardReaderDocumentationTitle)
.font(.posBodyLargeRegular())
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
Text(Localization.cardReaderDocumentationSubtitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
}
Spacer()
}
}
.padding()
.accessibilityAddTraits(.isButton)
.listRowSeparator(.hidden)
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.listRowBackground(Color.clear)
.background(backgroundColor)
.foregroundColor(.posOnSurface)
}
.navigationBarBackButtonHidden(true)
.posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
SafariView(url: POSConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
}
}

var cardReadersView: some View {
VStack(spacing: POSSpacing.none) {
POSPageHeaderView(
Expand Down Expand Up @@ -243,15 +168,13 @@ private extension POSSettingsHardwareDetailView {
} else {
POSSettingsCardView(title: Localization.cardReaderConnectTitle,
subtitle: Localization.cardReaderConnectSubtitle,
isSelected: false, // Temporary. Update with WOOMOB-1571
action: {
posModel.connectCardReader()
})
}

POSSettingsCardView(title: Localization.cardReaderDocumentationTitle,
subtitle: Localization.cardReaderDocumentationSubtitle,
isSelected: false, // Temporary. Update with WOOMOB-1571
action: { showCardReaderDocumentationModal = true })
.accessibilityAddTraits(.isButton)
.listRowSeparator(.hidden)
Expand All @@ -277,36 +200,22 @@ private extension POSSettingsHardwareDetailView {
}, buttonIcon: "chevron.left"))
.foregroundColor(.posSurface)

List(ScannerDestination.allCases) { destination in
Button {
handleScannerDestination(destination)
} label: {
HStack(spacing: POSSpacing.medium) {
Image(systemName: destination.icon)
.font(.posBodyLargeRegular())
.accessibilityHidden(true)
.renderedIf(!dynamicTypeSize.isAccessibilitySize)
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Text(destination.title)
.font(.posBodyLargeRegular())
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
Text(destination.subtitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
VStack(spacing: POSSpacing.small) {
ForEach(ScannerDestination.allCases) { destination in
POSSettingsCardView(
title: destination.title,
subtitle: destination.subtitle,
action: {
handleScannerDestination(destination)
}
Spacer()
}
)
}
.accessibilityAddTraits(.isButton)
.listRowSeparator(.hidden)
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.listRowBackground(Color.clear)
.background(backgroundColor)
.foregroundColor(.posOnSurface)
.padding(.horizontal, POSPadding.medium)

Spacer()
}
.background(backgroundColor)
.navigationBarBackButtonHidden(true)
}
}
Expand Down Expand Up @@ -336,15 +245,6 @@ private extension POSSettingsHardwareDetailView {
return Localization.hardwareNavigationBarcodeSubtitle
}
}

var icon: String {
switch self {
case .cardReaders:
return "creditcard"
case .scanners:
return "qrcode.viewfinder"
}
}
}

enum NavigationDestination: Hashable {
Expand Down Expand Up @@ -374,15 +274,6 @@ private extension POSSettingsHardwareDetailView {
return Localization.scannerDocumentationSubtitle
}
}

var icon: String {
switch self {
case .setup:
return "gearshape"
case .documentation:
return "doc.text"
}
}
}

func handleScannerDestination(_ destination: ScannerDestination) {
Expand Down