diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index d7366537b76..fd2a5b2d048 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -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) { @@ -41,7 +48,13 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } } + .listRowSeparator(.hidden) } + .listStyle(.plain) + .scrollContentBackground(.hidden) + .background(backgroundColor) + .listRowBackground(Color.clear) + .listRowSeparator(.hidden) .navigationDestination(for: NavigationDestination.self) { destination in switch destination { case .hardware(.cardReaders): @@ -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 { @@ -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 { @@ -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", 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 diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index 4b68c5dc23a..780e73378b6 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 { @@ -20,6 +24,7 @@ struct PointOfSaleSettingsStoreDetailView: View { .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) } + .listRowSeparator(.hidden) VStack(alignment: .leading, spacing: POSPadding.small) { Text(Localization.address) @@ -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 { @@ -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() @@ -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()) @@ -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", diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index ebd08dde7de..4537b2fa3c3 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 @@ -98,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() } @@ -115,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) ) } }