From 14eec1dba10e7d3c126f646cb8e15989c6dc89f9 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 18:21:41 +0700 Subject: [PATCH 01/14] prevents automatic uppercase from Section usage --- .../Settings/PointOfSaleSettingsStoreDetailView.swift | 2 ++ 1 file changed, 2 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index 4b68c5dc23a..4f7b04d35e0 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift @@ -31,6 +31,7 @@ struct PointOfSaleSettingsStoreDetailView: View { } header: { Text(Localization.storeInformation) .font(.posBodyLargeRegular()) + .textCase(nil) } Section { @@ -66,6 +67,7 @@ struct PointOfSaleSettingsStoreDetailView: View { } header: { Text(Localization.receiptInformation) .font(.posBodyLargeRegular()) + .textCase(nil) } .renderedIf(viewModel.shouldShowReceiptInformation) } From d8a5e9d1ab86880dfae513a5eadb070795d4c35c Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 18:46:13 +0700 Subject: [PATCH 02/14] update back button on nav stack --- ...ointOfSaleSettingsHardwareDetailView.swift | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index d7366537b76..69090fe57a2 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -111,7 +111,22 @@ struct PointOfSaleSettingsHardwareDetailView: View { .buttonStyle(.plain) } } - .navigationTitle(Localization.cardReadersTitle) + .navigationBarBackButtonHidden(true) + .toolbar { + ToolbarItem(placement: .navigationBarLeading) { + Button { + navigationPath.removeLast() + } label: { + HStack(spacing: POSSpacing.small) { + Image(systemName: "chevron.left") + Text(Localization.cardReadersTitle) + } + .font(.posBodyLargeRegular()) + .foregroundColor(.posOnSurface) + .contentShape(Rectangle()) + } + } + } .posFullScreenCover(isPresented: $showCardReaderDocumentationModal) { SafariView(url: WooConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL()) } @@ -136,7 +151,22 @@ struct PointOfSaleSettingsHardwareDetailView: View { } .buttonStyle(.plain) } - .navigationTitle(Localization.scannersTitle) + .navigationBarBackButtonHidden(true) + .toolbar { + ToolbarItem(placement: .navigationBarLeading) { + Button { + navigationPath.removeLast() + } label: { + HStack(spacing: POSSpacing.small) { + Image(systemName: "chevron.left") + Text(Localization.scannersTitle) + } + .font(.posBodyLargeRegular()) + .foregroundColor(.posOnSurface) + .contentShape(Rectangle()) + } + } + } } } From 9bf7f13d366f43d781401a082ee20d2b183001b4 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 19:15:12 +0700 Subject: [PATCH 03/14] remove separators store detail view --- .../PointOfSaleSettingsStoreDetailView.swift | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index 4f7b04d35e0..64abf31f160 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift @@ -20,7 +20,8 @@ struct PointOfSaleSettingsStoreDetailView: View { .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) } - + .listRowSeparator(.hidden) + VStack(alignment: .leading, spacing: POSPadding.small) { Text(Localization.address) .font(.posBodyMediumRegular()) @@ -28,6 +29,7 @@ struct PointOfSaleSettingsStoreDetailView: View { .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) } + .listRowSeparator(.hidden) } header: { Text(Localization.storeInformation) .font(.posBodyLargeRegular()) @@ -40,30 +42,35 @@ 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()) @@ -71,6 +78,11 @@ struct PointOfSaleSettingsStoreDetailView: View { } .renderedIf(viewModel.shouldShowReceiptInformation) } + .listStyle(.plain) + .scrollContentBackground(.hidden) + .background(Color.posOnPrimaryContainer) + .listRowSeparator(.hidden) + .listSectionSeparator(.hidden) .task { isLoading = true await viewModel.retrievePOSReceiptSettings() From d668e5a67e0000ee0722528122d58f3b39646901 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 19:15:28 +0700 Subject: [PATCH 04/14] update bg color settings --- .../POS/Presentation/Settings/PointOfSaleSettingsView.swift | 1 + 1 file changed, 1 insertion(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index ebd08dde7de..885990ee20c 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift @@ -65,6 +65,7 @@ extension PointOfSaleSettingsView { } .padding(.horizontal, POSPadding.medium) } + .background(Color.posSurface) } @ViewBuilder From 49b4a4da8f95d591990ae2b88ea2598c50d9b9d6 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 19:20:49 +0700 Subject: [PATCH 05/14] update headers --- .../Settings/PointOfSaleSettingsStoreDetailView.swift | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index 64abf31f160..7e790d480ae 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift @@ -21,7 +21,7 @@ struct PointOfSaleSettingsStoreDetailView: View { .foregroundStyle(.secondary) } .listRowSeparator(.hidden) - + VStack(alignment: .leading, spacing: POSPadding.small) { Text(Localization.address) .font(.posBodyMediumRegular()) @@ -32,7 +32,8 @@ struct PointOfSaleSettingsStoreDetailView: View { .listRowSeparator(.hidden) } header: { Text(Localization.storeInformation) - .font(.posBodyLargeRegular()) + .font(.posHeadingBold) + .foregroundStyle(.primary) .textCase(nil) } @@ -64,7 +65,7 @@ struct PointOfSaleSettingsStoreDetailView: View { settingValueView(for: viewModel.receiptInformation.email) } .listRowSeparator(.hidden) - + VStack(alignment: .leading, spacing: POSPadding.small) { Text(Localization.refundReturnsPolicy) .font(.posBodyMediumRegular()) @@ -73,7 +74,8 @@ struct PointOfSaleSettingsStoreDetailView: View { .listRowSeparator(.hidden) } header: { Text(Localization.receiptInformation) - .font(.posBodyLargeRegular()) + .font(.posHeadingBold) + .foregroundStyle(.primary) .textCase(nil) } .renderedIf(viewModel.shouldShowReceiptInformation) From 8762bc3331fd5db40be405c4eb1633c4e978b63f Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 19:28:14 +0700 Subject: [PATCH 06/14] update bg color hardware view --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 69090fe57a2..2dedd8859b5 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -41,7 +41,13 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } } + .listRowSeparator(.hidden) } + .listStyle(.plain) + .scrollContentBackground(.hidden) + .background(Color.posOnPrimaryContainer) + .listRowBackground(Color.clear) + .listRowSeparator(.hidden) .navigationDestination(for: NavigationDestination.self) { destination in switch destination { case .hardware(.cardReaders): From 4b5388e61c0b55b96560a6cb3bd8cd7ad582815e Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 19:40:06 +0700 Subject: [PATCH 07/14] header for hardware view --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 2dedd8859b5..acea0fb557d 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -27,6 +27,9 @@ struct PointOfSaleSettingsHardwareDetailView: View { 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) { @@ -277,6 +280,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", From 57572983ba52cdc49222ca5d974627c5f723ced9 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 19:50:51 +0700 Subject: [PATCH 08/14] update bg for detail destinations --- .../PointOfSaleSettingsHardwareDetailView.swift | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index acea0fb557d..88503c54a1f 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -118,7 +118,13 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } .buttonStyle(.plain) + .listRowSeparator(.hidden) } + .listStyle(.plain) + .scrollContentBackground(.hidden) + .listRowBackground(Color.clear) + .background(Color.posSurface) + .foregroundColor(.posOnSurface) } .navigationBarBackButtonHidden(true) .toolbar { @@ -159,7 +165,13 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } .buttonStyle(.plain) + .listRowSeparator(.hidden) } + .listStyle(.plain) + .scrollContentBackground(.hidden) + .listRowBackground(Color.clear) + .background(Color.posSurface) + .foregroundColor(.posOnSurface) .navigationBarBackButtonHidden(true) .toolbar { ToolbarItem(placement: .navigationBarLeading) { From 1895beb9d447cb610c629d0613c78f64c08eff36 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 20:16:18 +0700 Subject: [PATCH 09/14] update list parent bg color --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 88503c54a1f..e627a267704 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -123,7 +123,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { .listStyle(.plain) .scrollContentBackground(.hidden) .listRowBackground(Color.clear) - .background(Color.posSurface) + .background(Color.posSurfaceBright) .foregroundColor(.posOnSurface) } .navigationBarBackButtonHidden(true) @@ -170,7 +170,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { .listStyle(.plain) .scrollContentBackground(.hidden) .listRowBackground(Color.clear) - .background(Color.posSurface) + .background(Color.posSurfaceBright) .foregroundColor(.posOnSurface) .navigationBarBackButtonHidden(true) .toolbar { From 41779c76e5d6e646b960b83e4a4c436c286418db Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 21:04:51 +0700 Subject: [PATCH 10/14] background consistency dark mode --- ...ointOfSaleSettingsHardwareDetailView.swift | 12 +++++-- .../PointOfSaleSettingsStoreDetailView.swift | 36 ++++++++++++++----- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index e627a267704..553ff7175f3 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -25,6 +25,10 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } + private var backgroundColor: Color { + Color.posOnSecondaryContainer + } + var body: some View { NavigationStack(path: $navigationPath) { POSPageHeaderView(title: Localization.hardwareTitle) @@ -48,7 +52,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { } .listStyle(.plain) .scrollContentBackground(.hidden) - .background(Color.posOnPrimaryContainer) + .background(backgroundColor) .listRowBackground(Color.clear) .listRowSeparator(.hidden) .navigationDestination(for: NavigationDestination.self) { destination in @@ -123,7 +127,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { .listStyle(.plain) .scrollContentBackground(.hidden) .listRowBackground(Color.clear) - .background(Color.posSurfaceBright) + .background(backgroundColor) .foregroundColor(.posOnSurface) } .navigationBarBackButtonHidden(true) @@ -142,6 +146,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } } + .toolbarBackground(backgroundColor, for: .navigationBar) .posFullScreenCover(isPresented: $showCardReaderDocumentationModal) { SafariView(url: WooConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL()) } @@ -170,7 +175,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { .listStyle(.plain) .scrollContentBackground(.hidden) .listRowBackground(Color.clear) - .background(Color.posSurfaceBright) + .background(backgroundColor) .foregroundColor(.posOnSurface) .navigationBarBackButtonHidden(true) .toolbar { @@ -188,6 +193,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } } + .toolbarBackground(backgroundColor, for: .navigationBar) } } diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index 7e790d480ae..d177797b726 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift @@ -9,6 +9,10 @@ struct PointOfSaleSettingsStoreDetailView: View { self.viewModel = viewModel } + private var backgroundColor: Color { + Color.posOnSecondaryContainer + } + var body: some View { NavigationStack { List { @@ -31,10 +35,17 @@ struct PointOfSaleSettingsStoreDetailView: View { } .listRowSeparator(.hidden) } header: { - Text(Localization.storeInformation) - .font(.posHeadingBold) - .foregroundStyle(.primary) - .textCase(nil) + 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 { @@ -73,16 +84,23 @@ struct PointOfSaleSettingsStoreDetailView: View { } .listRowSeparator(.hidden) } header: { - Text(Localization.receiptInformation) - .font(.posHeadingBold) - .foregroundStyle(.primary) - .textCase(nil) + 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(Color.posOnPrimaryContainer) + .background(backgroundColor) .listRowSeparator(.hidden) .listSectionSeparator(.hidden) .task { From 8a3b52688056253992f248e2c507c32ed6298bd0 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 21:20:29 +0700 Subject: [PATCH 11/14] update foreground for selection items --- .../Settings/PointOfSaleSettingsView.swift | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index 885990ee20c..4537b2fa3c3 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift @@ -99,14 +99,14 @@ struct PointOfSaleSettingsCard: View { HStack { Image(systemName: item.icon) .font(.posBodyLargeRegular()) - .foregroundStyle(isSelected ? .white : .primary) + .foregroundStyle(Color.posOnSurface) VStack(alignment: .leading) { Text(item.title) .font(.posBodyLargeRegular()) - .foregroundStyle(isSelected ? .white : .primary) + .foregroundStyle(Color.posOnSurface) Text(item.subtitle) .font(.posBodyMediumRegular()) - .foregroundStyle(isSelected ? .white.opacity(0.8) : .secondary) + .foregroundStyle(Color.posOnSurface) } Spacer() } @@ -116,8 +116,8 @@ struct PointOfSaleSettingsCard: View { } .buttonStyle(.plain) .background( - RoundedRectangle(cornerRadius: POSCornerRadiusStyle.large.value, style: .continuous) - .fill(isSelected ? Color.accentColor : Color.clear) + RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value, style: .continuous) + .fill(isSelected ? Color.posSecondary : Color.clear) ) } } From 76e4f4e03de130402b5e9789143303359e89d2ea Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Sun, 31 Aug 2025 21:36:06 +0700 Subject: [PATCH 12/14] update help view --- .../PointOfSaleSettingsHelpDetailView.swift | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift index e89a241fca2..707c75ac30a 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift @@ -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 @@ -23,6 +29,7 @@ struct PointOfSaleSettingsHelpDetailView: View { } } } + .listRowSeparator(.hidden) .buttonStyle(.plain) Button { @@ -40,6 +47,7 @@ struct PointOfSaleSettingsHelpDetailView: View { } } } + .listRowSeparator(.hidden) .buttonStyle(.plain) Button { @@ -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 @@ -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?", @@ -147,3 +167,9 @@ private extension PointOfSaleSettingsHelpDetailView { .navigationViewStyle(.stack) } } + +#if DEBUG +#Preview { + PointOfSaleSettingsHelpDetailView() +} +#endif From df81a6fca1159b1613114c7301e59316fe2e6ce1 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 17:50:12 +0700 Subject: [PATCH 13/14] remove shimmering card, instead add line --- .../PointOfSaleSettingsStoreDetailView.swift | 47 ++++--------------- 1 file changed, 9 insertions(+), 38 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index d177797b726..780e73378b6 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift @@ -114,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()) @@ -123,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 extension PointOfSaleSettingsStoreDetailView { + enum Constants { + static let shimmeringTextWidth: CGFloat = 70 + static let shimmeringTextHeight: CGFloat = 16 } - private enum Constants { - static let orderCardMinHeight: CGFloat = 90 - static let maximumOrderCardHeight: CGFloat = Constants.orderCardMinHeight * 2 - } -} - -private extension PointOfSaleSettingsStoreDetailView { enum Localization { static let notSet = NSLocalizedString( "pointOfSaleSettingsStoreDetailView.notSet", From 87a46da366f71e3a005b1b66ecf4cccd7467fbb7 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 18:04:19 +0700 Subject: [PATCH 14/14] update subnavigation headers to align with parent and sidebar --- ...ointOfSaleSettingsHardwareDetailView.swift | 89 ++++++++----------- 1 file changed, 36 insertions(+), 53 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 553ff7175f3..fd2a5b2d048 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -82,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 { @@ -131,71 +138,47 @@ struct PointOfSaleSettingsHardwareDetailView: View { .foregroundColor(.posOnSurface) } .navigationBarBackButtonHidden(true) - .toolbar { - ToolbarItem(placement: .navigationBarLeading) { - Button { - navigationPath.removeLast() - } label: { - HStack(spacing: POSSpacing.small) { - Image(systemName: "chevron.left") - Text(Localization.cardReadersTitle) - } - .font(.posBodyLargeRegular()) - .foregroundColor(.posOnSurface) - .contentShape(Rectangle()) - } - } - } - .toolbarBackground(backgroundColor, for: .navigationBar) .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) - .font(.posBodyLargeRegular()) - Text(destination.subtitle) - .font(.posBodyMediumRegular()) - .foregroundStyle(.secondary) - } - } - } - .buttonStyle(.plain) - .listRowSeparator(.hidden) - } - .listStyle(.plain) - .scrollContentBackground(.hidden) - .listRowBackground(Color.clear) - .background(backgroundColor) - .foregroundColor(.posOnSurface) - .navigationBarBackButtonHidden(true) - .toolbar { - ToolbarItem(placement: .navigationBarLeading) { - Button { + 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(spacing: POSSpacing.small) { - Image(systemName: "chevron.left") - Text(Localization.scannersTitle) + HStack(alignment: .firstTextBaseline) { + Image(systemName: destination.icon) + .font(.posBodyLargeRegular()) + VStack(alignment: .leading, spacing: POSPadding.xSmall) { + Text(destination.title) + .font(.posBodyLargeRegular()) + Text(destination.subtitle) + .font(.posBodyMediumRegular()) + .foregroundStyle(.secondary) + } } - .font(.posBodyLargeRegular()) - .foregroundColor(.posOnSurface) - .contentShape(Rectangle()) } + .buttonStyle(.plain) + .listRowSeparator(.hidden) } + .listStyle(.plain) + .scrollContentBackground(.hidden) + .listRowBackground(Color.clear) + .background(backgroundColor) + .foregroundColor(.posOnSurface) } - .toolbarBackground(backgroundColor, for: .navigationBar) + .navigationBarBackButtonHidden(true) } - } extension PointOfSaleSettingsHardwareDetailView {