diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift index 780e73378b6..2917b596fe5 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift @@ -15,94 +15,21 @@ struct PointOfSaleSettingsStoreDetailView: View { var body: some View { NavigationStack { - List { - Section { - VStack(alignment: .leading, spacing: POSPadding.small) { - Text(Localization.storeName) - .font(.posBodyMediumRegular()) - Text(viewModel.storeName) - .font(.posBodyMediumRegular()) - .foregroundStyle(.secondary) - } - .listRowSeparator(.hidden) - - VStack(alignment: .leading, spacing: POSPadding.small) { - Text(Localization.address) - .font(.posBodyMediumRegular()) - Text(viewModel.storeAddress) - .font(.posBodyMediumRegular()) - .foregroundStyle(.secondary) - } - .listRowSeparator(.hidden) - } header: { - 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 { - VStack(alignment: .leading, spacing: POSPadding.small) { - Text(Localization.receiptStoreName) - .font(.posBodyMediumRegular()) - settingValueView(for: viewModel.receiptInformation.storeName) - } - .listRowSeparator(.hidden) + VStack(spacing: POSSpacing.none) { + POSPageHeaderView(title: Localization.storeTitle) + .foregroundColor(.posSurface) + .accessibilityAddTraits(.isHeader) - 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) + ScrollView { + VStack(spacing: POSSpacing.medium) { + storeInformationView - VStack(alignment: .leading, spacing: POSPadding.small) { - Text(Localization.refundReturnsPolicy) - .font(.posBodyMediumRegular()) - settingValueView(for: viewModel.receiptInformation.refundReturnsPolicy) + receiptInformationView + .renderedIf(viewModel.shouldShowReceiptInformation) } - .listRowSeparator(.hidden) - } header: { - 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) + .background(backgroundColor) } - .listStyle(.plain) - .scrollContentBackground(.hidden) - .background(backgroundColor) - .listRowSeparator(.hidden) - .listSectionSeparator(.hidden) .task { isLoading = true await viewModel.retrievePOSReceiptSettings() @@ -111,6 +38,72 @@ struct PointOfSaleSettingsStoreDetailView: View { } } + @ViewBuilder + private var storeInformationView: some View { + VStack(spacing: POSSpacing.none) { + sectionHeaderView(title: Localization.storeInformation) + + VStack(spacing: POSSpacing.medium) { + fieldRowView(label: Localization.storeName, value: viewModel.storeName) + fieldRowView(label: Localization.address, value: viewModel.storeAddress) + } + .padding(.bottom, POSPadding.medium) + } + } + + @ViewBuilder + private var receiptInformationView: some View { + VStack(spacing: POSSpacing.none) { + sectionHeaderView(title: Localization.receiptInformation) + + VStack(spacing: POSSpacing.medium) { + receiptFieldRowView(label: Localization.receiptStoreName, value: viewModel.receiptInformation.storeName) + receiptFieldRowView(label: Localization.physicalAddress, value: viewModel.receiptInformation.storeAddress) + receiptFieldRowView(label: Localization.phoneNumber, value: viewModel.receiptInformation.phone) + receiptFieldRowView(label: Localization.email, value: viewModel.receiptInformation.email) + receiptFieldRowView(label: Localization.refundReturnsPolicy, value: viewModel.receiptInformation.refundReturnsPolicy) + } + .padding(.bottom, POSPadding.medium) + } + } + + @ViewBuilder + private func sectionHeaderView(title: String) -> some View { + ZStack { + backgroundColor + Text(title) + .font(.posBodyLargeBold) + .foregroundColor(.posOnSurface) + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal, POSPadding.medium) + .padding(.vertical, POSPadding.small) + } + } + + @ViewBuilder + private func fieldRowView(label: String, value: String) -> some View { + VStack(alignment: .leading, spacing: POSPadding.small) { + Text(label) + .font(.posBodyMediumRegular()) + Text(value) + .font(.posBodyMediumRegular()) + .foregroundStyle(.secondary) + } + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal, POSPadding.medium) + } + + @ViewBuilder + private func receiptFieldRowView(label: String, value: String?) -> some View { + VStack(alignment: .leading, spacing: POSPadding.small) { + Text(label) + .font(.posBodyMediumRegular()) + settingValueView(for: value) + } + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal, POSPadding.medium) + } + @ViewBuilder private func settingValueView(for value: String?) -> some View { if isLoading { @@ -135,6 +128,12 @@ private extension PointOfSaleSettingsStoreDetailView { } enum Localization { + static let storeTitle = NSLocalizedString( + "pointOfSaleSettingsStoreDetailView.storeTitle", + value: "Store", + comment: "Navigation title for the store details in POS settings." + ) + static let notSet = NSLocalizedString( "pointOfSaleSettingsStoreDetailView.notSet", value: "Not set", diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index 80ec93993c9..2106b8030af 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift @@ -92,11 +92,17 @@ extension PointOfSaleSettingsView { struct PointOfSaleSettingsCard: View { @Environment(\.dynamicTypeSize) private var dynamicTypeSize + @Environment(\.colorScheme) private var colorScheme let item: PointOfSaleSettingsView.SidebarNavigation let isSelected: Bool let onTap: () -> Void + private var selectionBackgroundColor: Color { + guard isSelected else { return Color.clear } + return colorScheme == .dark ? Color.posPrimary : Color.posSecondary + } + var body: some View { Button(action: onTap) { HStack(spacing: POSSpacing.medium) { @@ -126,7 +132,7 @@ struct PointOfSaleSettingsCard: View { .accessibilityAddTraits(.isButton) .background( RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value, style: .continuous) - .fill(isSelected ? Color.posSecondary : Color.clear) + .fill(selectionBackgroundColor) ) } }