Skip to content

[POS Settings] Design updates #16065

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 14 commits into from
Sep 1, 2025
Merged

[POS Settings] Design updates #16065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
14eec1d
prevents automatic uppercase from Section usage
iamgabrielma Aug 31, 2025
d8a5e9d
update back button on nav stack
iamgabrielma Aug 31, 2025
9bf7f13
remove separators store detail view
iamgabrielma Aug 31, 2025
d668e5a
update bg color settings
iamgabrielma Aug 31, 2025
49b4a4d
update headers
iamgabrielma Aug 31, 2025
8762bc3
update bg color hardware view
iamgabrielma Aug 31, 2025
4b5388e
header for hardware view
iamgabrielma Aug 31, 2025
5757298
update bg for detail destinations
iamgabrielma Aug 31, 2025
1895beb
update list parent bg color
iamgabrielma Aug 31, 2025
41779c7
background consistency dark mode
iamgabrielma Aug 31, 2025
8a3b526
update foreground for selection items
iamgabrielma Aug 31, 2025
76e4f4e
update help view
iamgabrielma Aug 31, 2025
df81a6f
remove shimmering card, instead add line
iamgabrielma Sep 1, 2025
87a46da
update subnavigation headers to align with parent and sidebar
iamgabrielma Sep 1, 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
80 changes: 63 additions & 17 deletions WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,15 @@ struct PointOfSaleSettingsHardwareDetailView: View {
}
}

private var backgroundColor: Color {
Color.posOnSecondaryContainer
}

var body: some View {
NavigationStack(path: $navigationPath) {
POSPageHeaderView(title: Localization.hardwareTitle)
.foregroundColor(.posSurface)

List(HardwareDestination.allCases) { destination in
NavigationLink(value: NavigationDestination.hardware(destination)) {
HStack(alignment: .firstTextBaseline) {
Expand All @@ -41,7 +48,13 @@ struct PointOfSaleSettingsHardwareDetailView: View {
}
}
}
.listRowSeparator(.hidden)
}
.listStyle(.plain)
Copy link
Contributor Author

@iamgabrielma iamgabrielma Aug 31, 2025

Choose a reason for hiding this comment

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

In general I found very tricky to adapt Lists to the POS style, most likely when we implement the next iteration of designs we want to get rid of List entirely and build the view up from zero.

Copy link
Contributor

@staskus staskus Sep 1, 2025

Choose a reason for hiding this comment

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

For item list or coupons we use InfiniteScrollView + LazyVStack + ForEach. Maybe this is is where we will want to go with settings, not sure.

.scrollContentBackground(.hidden)
.background(backgroundColor)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.navigationDestination(for: NavigationDestination.self) { destination in
switch destination {
case .hardware(.cardReaders):
Expand Down Expand Up @@ -69,7 +82,14 @@ struct PointOfSaleSettingsHardwareDetailView: View {
}

private var cardReadersView: some View {
VStack(spacing: POSSpacing.large) {
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 {
Expand Down Expand Up @@ -109,36 +129,56 @@ struct PointOfSaleSettingsHardwareDetailView: View {
}
}
.buttonStyle(.plain)
.listRowSeparator(.hidden)
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.listRowBackground(Color.clear)
.background(backgroundColor)
.foregroundColor(.posOnSurface)
}
.navigationTitle(Localization.cardReadersTitle)
.navigationBarBackButtonHidden(true)
.posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
SafariView(url: WooConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
}
}

private var scannersView: some View {
List(ScannerDestination.allCases) { destination in
Button {
handleScannerDestination(destination)
} label: {
HStack(alignment: .firstTextBaseline) {
Image(systemName: destination.icon)
.font(.posBodyLargeRegular())
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Text(destination.title)
VStack(spacing: POSSpacing.none) {
POSPageHeaderView(
title: Localization.scannersTitle,
backButtonConfiguration: .init(state: .enabled, action: {
navigationPath.removeLast()
}, buttonIcon: "chevron.left"))
.foregroundColor(.posSurface)

List(ScannerDestination.allCases) { destination in
Button {
handleScannerDestination(destination)
} label: {
HStack(alignment: .firstTextBaseline) {
Image(systemName: destination.icon)
.font(.posBodyLargeRegular())
Text(destination.subtitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
Text(destination.title)
.font(.posBodyLargeRegular())
Text(destination.subtitle)
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
}
}
}
.buttonStyle(.plain)
.listRowSeparator(.hidden)
}
.buttonStyle(.plain)
.listStyle(.plain)
.scrollContentBackground(.hidden)
.listRowBackground(Color.clear)
.background(backgroundColor)
.foregroundColor(.posOnSurface)
}
.navigationTitle(Localization.scannersTitle)
.navigationBarBackButtonHidden(true)
}

}

extension PointOfSaleSettingsHardwareDetailView {
Expand Down Expand Up @@ -241,6 +281,12 @@ private extension PointOfSaleSettingsHardwareDetailView {
comment: "Text displayed on Point of Sale settings when card reader battery is unknown."
)

static let hardwareTitle = NSLocalizedString(
"pointOfSaleSettingsHardwareDetailView.hardwareTitle",
value: "Hardware",
comment: "Navigation title for the hardware settings list."
)

static let cardReadersTitle = NSLocalizedString(
"pointOfSaleSettingsHardwareDetailView.cardReadersTitle",
value: "Card readers",
Expand Down
26 changes: 26 additions & 0 deletions WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@ struct PointOfSaleSettingsHelpDetailView: View {
@State private var showDocumentation = false
@State private var showSupport = false

private var backgroundColor: Color {
Color.posOnSecondaryContainer
}

var body: some View {
NavigationStack {
POSPageHeaderView(title: Localization.helpTitle)
.foregroundColor(.posSurface)
List {
Button {
showProductRestrictions = true
Expand All @@ -23,6 +29,7 @@ struct PointOfSaleSettingsHelpDetailView: View {
}
}
}
.listRowSeparator(.hidden)
.buttonStyle(.plain)

Button {
Expand All @@ -40,6 +47,7 @@ struct PointOfSaleSettingsHelpDetailView: View {
}
}
}
.listRowSeparator(.hidden)
.buttonStyle(.plain)

Button {
Expand All @@ -57,8 +65,14 @@ struct PointOfSaleSettingsHelpDetailView: View {
}
}
}
.listRowSeparator(.hidden)
.buttonStyle(.plain)
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.background(backgroundColor)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
}
.posModal(isPresented: $showProductRestrictions) {
// TODO: Remove copy on POSFloatingControlView.documentationView
Expand Down Expand Up @@ -86,6 +100,12 @@ private extension PointOfSaleSettingsHelpDetailView {
}

enum Localization {
static let helpTitle = NSLocalizedString(
"PointOfSaleSettingsHelpDetailView.help.title",
value: "Help",
comment: "Navigation title for the help settings list."
)

static let productRestrictionsInfo = NSLocalizedString(
"PointOfSaleSettingsHelpDetailView.help.productRestrictionsInfo.button.title",
value: "Where are my products?",
Expand Down Expand Up @@ -147,3 +167,9 @@ private extension PointOfSaleSettingsHelpDetailView {
.navigationViewStyle(.stack)
}
}

#if DEBUG
#Preview {
PointOfSaleSettingsHelpDetailView()
}
#endif
89 changes: 47 additions & 42 deletions WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ struct PointOfSaleSettingsStoreDetailView: View {
self.viewModel = viewModel
}

private var backgroundColor: Color {
Color.posOnSecondaryContainer
}

var body: some View {
NavigationStack {
List {
Expand All @@ -20,6 +24,7 @@ struct PointOfSaleSettingsStoreDetailView: View {
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
}
.listRowSeparator(.hidden)

VStack(alignment: .leading, spacing: POSPadding.small) {
Text(Localization.address)
Expand All @@ -28,9 +33,19 @@ struct PointOfSaleSettingsStoreDetailView: View {
.font(.posBodyMediumRegular())
.foregroundStyle(.secondary)
}
.listRowSeparator(.hidden)
} header: {
Text(Localization.storeInformation)
.font(.posBodyLargeRegular())
ZStack {
backgroundColor
Text(Localization.storeInformation)
.font(.posHeadingBold)
.foregroundColor(.posOnSurface)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, POSPadding.medium)
.padding(.vertical, POSPadding.small)
.textCase(nil)
}
.listRowInsets(EdgeInsets())
}

Section {
Expand All @@ -39,36 +54,55 @@ struct PointOfSaleSettingsStoreDetailView: View {
.font(.posBodyMediumRegular())
settingValueView(for: viewModel.receiptInformation.storeName)
}
.listRowSeparator(.hidden)

VStack(alignment: .leading, spacing: POSPadding.small) {
Text(Localization.physicalAddress)
.font(.posBodyMediumRegular())
settingValueView(for: viewModel.receiptInformation.storeAddress)
}
.listRowSeparator(.hidden)

VStack(alignment: .leading, spacing: POSPadding.small) {
Text(Localization.phoneNumber)
.font(.posBodyMediumRegular())
settingValueView(for: viewModel.receiptInformation.phone)
}
.listRowSeparator(.hidden)

VStack(alignment: .leading, spacing: POSPadding.small) {
Text(Localization.email)
.font(.posBodyMediumRegular())
settingValueView(for: viewModel.receiptInformation.email)
}
.listRowSeparator(.hidden)

VStack(alignment: .leading, spacing: POSPadding.small) {
Text(Localization.refundReturnsPolicy)
.font(.posBodyMediumRegular())
settingValueView(for: viewModel.receiptInformation.refundReturnsPolicy)
}
.listRowSeparator(.hidden)
} header: {
Text(Localization.receiptInformation)
.font(.posBodyLargeRegular())
ZStack {
backgroundColor
Text(Localization.receiptInformation)
.font(.posHeadingBold)
.foregroundColor(.posOnSurface)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, POSPadding.medium)
.padding(.vertical, POSPadding.small)
.textCase(nil)
}
.listRowInsets(EdgeInsets())
}
.renderedIf(viewModel.shouldShowReceiptInformation)
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
.background(backgroundColor)
.listRowSeparator(.hidden)
.listSectionSeparator(.hidden)
.task {
isLoading = true
await viewModel.retrievePOSReceiptSettings()
Expand All @@ -80,7 +114,11 @@ struct PointOfSaleSettingsStoreDetailView: View {
@ViewBuilder
private func settingValueView(for value: String?) -> some View {
if isLoading {
GhostSettingRowView()
Rectangle()
.fill(Color.posOnSurfaceVariantLowest)
.frame(width: Constants.shimmeringTextWidth, height: Constants.shimmeringTextHeight)
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
.shimmering()
} else {
Text(value ?? Localization.notSet)
.font(.posBodyMediumRegular())
Expand All @@ -89,46 +127,13 @@ struct PointOfSaleSettingsStoreDetailView: View {
}
}

// Temporary: Simplified copy from PointOfSaleOrderListView.GhostOrderRowView
private struct GhostSettingRowView: View {
@ScaledMetric private var scale: CGFloat = 1.0
@Environment(\.dynamicTypeSize) var dynamicTypeSize

private var minHeight: CGFloat {
min(Constants.orderCardMinHeight * scale, Constants.maximumOrderCardHeight)
}

var body: some View {
HStack(alignment: .center, spacing: POSSpacing.medium) {
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
Rectangle()
.fill(Color.posOnSurfaceVariantLowest)
.frame(width: 70, height: 16)
.clipShape(RoundedRectangle(cornerRadius: 4))
.shimmering()

Rectangle()
.fill(Color.posOnSurfaceVariantLowest)
.frame(width: 160, height: 14)
.clipShape(RoundedRectangle(cornerRadius: 4))
.shimmering()
}
}
.padding(.horizontal, POSPadding.medium * (1 / scale))
.padding(.vertical, POSPadding.medium * (1 / scale))
.frame(maxWidth: .infinity, minHeight: dynamicTypeSize.isAccessibilitySize ? nil : minHeight, alignment: .leading)
.background(Color.posSurfaceContainerLowest)
.posItemCardBorderStyles()
.geometryGroup()
}

private enum Constants {
static let orderCardMinHeight: CGFloat = 90
static let maximumOrderCardHeight: CGFloat = Constants.orderCardMinHeight * 2
private extension PointOfSaleSettingsStoreDetailView {
enum Constants {
static let shimmeringTextWidth: CGFloat = 70
static let shimmeringTextHeight: CGFloat = 16
}
}

private extension PointOfSaleSettingsStoreDetailView {
enum Localization {
static let notSet = NSLocalizedString(
"pointOfSaleSettingsStoreDetailView.notSet",
Expand Down
Loading