Merge pull request #8509 from woocommerce/feat/8378-sc-profiler-country

Store creation M3: store country profiler question UI (not integrated to the flow)

Author: jaclync

WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryButton.swift

@@ -0,0 +1,38 @@
+import SwiftUI
+
+/// A button for a country that the user can select for their store during the store creation profiler flow.
+struct StoreCreationCountryButton: View {
+    private let countryCode: SiteAddress.CountryCode
+    @ObservedObject private var viewModel: StoreCreationCountryQuestionViewModel
+
+    init(countryCode: SiteAddress.CountryCode, viewModel: StoreCreationCountryQuestionViewModel) {
+        self.countryCode = countryCode
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        Button(action: {
+            viewModel.selectCountry(countryCode)
+        }, label: {
+            HStack(spacing: 24) {
+                if let flagEmoji = countryCode.flagEmoji {
+                    Text(flagEmoji)
+                }
+                Text(countryCode.readableCountry)
+                Spacer()
+            }
+        })
+        .buttonStyle(SelectableSecondaryButtonStyle(isSelected: viewModel.selectedCountryCode == countryCode))
+    }
+}
+
+struct StoreCreationCountryButton_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack {
+            StoreCreationCountryButton(countryCode: .US,
+                                       viewModel: .init(storeName: "", onContinue: { _ in }))
+            StoreCreationCountryButton(countryCode: .UM,
+                                       viewModel: .init(storeName: "", onContinue: { _ in }))
+        }
+    }
+}

WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryQuestionView.swift

@@ -0,0 +1,64 @@
+import SwiftUI
+
+/// Hosting controller that wraps the `StoreCreationCountryQuestionView`.
+final class StoreCreationCountryQuestionHostingController: UIHostingController<StoreCreationCountryQuestionView> {
+    init(viewModel: StoreCreationCountryQuestionViewModel) {
+        super.init(rootView: StoreCreationCountryQuestionView(viewModel: viewModel))
+    }
+
+    @available(*, unavailable)
+    required dynamic init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        configureTransparentNavigationBar()
+    }
+}
+
+/// Shows the store country question in the store creation flow.
+struct StoreCreationCountryQuestionView: View {
+    @StateObject private var viewModel: StoreCreationCountryQuestionViewModel
+
+    init(viewModel: StoreCreationCountryQuestionViewModel) {
+        self._viewModel = StateObject(wrappedValue: viewModel)
+    }
+
+    var body: some View {
+        RequiredStoreCreationProfilerQuestionView(viewModel: viewModel) {
+            VStack(spacing: 32) {
+                if let currentCountryCode = viewModel.currentCountryCode {
+                    StoreCreationCountrySectionView(header: Localization.currentLocationHeader,
+                                                    countryCodes: [currentCountryCode],
+                                                    viewModel: viewModel)
+                }
+                StoreCreationCountrySectionView(header: Localization.otherCountriesHeader,
+                                                countryCodes: viewModel.countryCodes,
+                                                viewModel: viewModel)
+            }
+        }
+    }
+}
+
+private extension StoreCreationCountryQuestionView {
+    enum Localization {
+        static let currentLocationHeader = NSLocalizedString(
+            "CURRENT LOCATION",
+            comment: "Header of the current country in the store creation country question.")
+        static let otherCountriesHeader = NSLocalizedString(
+            "COUNTRIES",
+            comment: "Header of a list of other countries in the store creation country question.")
+    }
+}
+
+struct StoreCreationCountryQuestionView_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            StoreCreationCountryQuestionView(viewModel: .init(storeName: "only in 2023",
+                                                              currentLocale: Locale.init(identifier: "en_US"),
+                                                              onContinue: { _ in }))
+        }
+    }
+}

WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryQuestionViewModel.swift

@@ -0,0 +1,87 @@
+import Combine
+import Foundation
+
+/// View model for `StoreCreationCountryQuestionView`, an optional profiler question about store country in the store creation flow.
+@MainActor
+final class StoreCreationCountryQuestionViewModel: StoreCreationProfilerQuestionViewModel, ObservableObject {
+    typealias CountryCode = SiteAddress.CountryCode
+
+    let topHeader: String
+
+    let title: String = Localization.title
+
+    let subtitle: String = Localization.subtitle
+
+    /// Question content.
+    /// TODO: 8378 - update values when API is ready.
+    let countryCodes: [CountryCode]
+
+    /// The estimated country code given the current device locale.
+    let currentCountryCode: CountryCode?
+
+    /// The currently selected country code.
+    @Published private(set) var selectedCountryCode: CountryCode?
+
+    /// Whether the continue button is enabled.
+    @Published private var isContinueButtonEnabledValue: Bool = false
+
+    private let onContinue: (CountryCode) -> Void
+
+    init(storeName: String,
+         currentLocale: Locale = .current,
+         onContinue: @escaping (CountryCode) -> Void) {
+        self.topHeader = storeName
+        self.onContinue = onContinue
+
+        currentCountryCode = currentLocale.regionCode.map { CountryCode(rawValue: $0) } ?? nil
+        selectedCountryCode = currentCountryCode
+
+        let allCountryCodes = CountryCode.allCases
+            .sorted(by: { $0.readableCountry < $1.readableCountry })
+        if let currentCountryCode {
+            countryCodes = {
+                var countryCodes = allCountryCodes
+                countryCodes.removeAll(where: { $0 == currentCountryCode })
+                return countryCodes
+            }()
+        } else {
+            countryCodes = allCountryCodes
+        }
+
+        $selectedCountryCode
+            .map { $0 != nil }
+            .assign(to: &$isContinueButtonEnabledValue)
+    }
+}
+
+extension StoreCreationCountryQuestionViewModel: RequiredStoreCreationProfilerQuestionViewModel {
+    var isContinueButtonEnabled: AnyPublisher<Bool, Never> {
+        $isContinueButtonEnabledValue.eraseToAnyPublisher()
+    }
+
+    func continueButtonTapped() async {
+        guard let selectedCountryCode else {
+            return
+        }
+        onContinue(selectedCountryCode)
+    }
+}
+
+extension StoreCreationCountryQuestionViewModel {
+    func selectCountry(_ countryCode: CountryCode) {
+        selectedCountryCode = countryCode
+    }
+}
+
+private extension StoreCreationCountryQuestionViewModel {
+    enum Localization {
+        static let title = NSLocalizedString(
+            "Confirm your location",
+            comment: "Title of the store creation profiler question about the store country."
+        )
+        static let subtitle = NSLocalizedString(
+            "We’ll use this information to get a head start on setting up payments, shipping, and taxes.",
+            comment: "Subtitle of the store creation profiler question about the store country."
+        )
+    }
+}

WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountrySectionView.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+
+/// Shows a header label and a list of countries for selection in the store creation profiler flow.
+struct StoreCreationCountrySectionView: View {
+    private let header: String
+    private let countryCodes: [SiteAddress.CountryCode]
+    @ObservedObject private var viewModel: StoreCreationCountryQuestionViewModel
+
+    init(header: String, countryCodes: [SiteAddress.CountryCode], viewModel: StoreCreationCountryQuestionViewModel) {
+        self.header = header
+        self.countryCodes = countryCodes
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(header)
+                .footnoteStyle()
+            VStack(spacing: 16) {
+                ForEach(countryCodes, id: \.self) { countryCode in
+                    StoreCreationCountryButton(countryCode: countryCode,
+                                               viewModel: viewModel)
+                }
+            }
+        }
+    }
+}
+
+struct StoreCreationCountrySectionView_Previews: PreviewProvider {
+    static var previews: some View {
+        StoreCreationCountrySectionView(header: "EXAMPLES", countryCodes: [.FJ, .UM, .US], viewModel: .init(storeName: "", onContinue: { _ in }))
+    }
+}

WooCommerce/Classes/Authentication/Store Creation/Profiler/RequiredStoreCreationProfilerQuestionView.swift

@@ -0,0 +1,90 @@
+import Combine
+import SwiftUI
+
+/// Handles the navigation action and provides the continue button state in a required profiler question view during store creation.
+/// The question is not skippable.
+protocol RequiredStoreCreationProfilerQuestionViewModel {
+    /// Called when the continue button is tapped.
+    func continueButtonTapped() async
+
+    /// Whether the continue button is enabled for the user to continue.
+    var isContinueButtonEnabled: AnyPublisher<Bool, Never> { get }
+}
+
+/// Shows a mandatory profiler question during the store creation flow with a generic content.
+struct RequiredStoreCreationProfilerQuestionView<QuestionContent: View>: View {
+    private let viewModel: StoreCreationProfilerQuestionViewModel & RequiredStoreCreationProfilerQuestionViewModel
+    @ViewBuilder private let questionContent: () -> QuestionContent
+    @State private var isWaitingForCompletion: Bool = false
+    @State private var isContinueButtonEnabled: Bool = false
+
+    init(viewModel: StoreCreationProfilerQuestionViewModel & RequiredStoreCreationProfilerQuestionViewModel,
+         @ViewBuilder questionContent: @escaping () -> QuestionContent) {
+        self.viewModel = viewModel
+        self.questionContent = questionContent
+    }
+
+    var body: some View {
+        ScrollView {
+            StoreCreationProfilerQuestionView<QuestionContent>(viewModel: viewModel, questionContent: questionContent)
+        }
+        .safeAreaInset(edge: .bottom) {
+            VStack {
+                Divider()
+                    .frame(height: Layout.dividerHeight)
+                    .foregroundColor(Color(.separator))
+                Button(Localization.continueButtonTitle) {
+                    Task { @MainActor in
+                        isWaitingForCompletion = true
+                        await viewModel.continueButtonTapped()
+                        isWaitingForCompletion = false
+                    }
+                }
+                .buttonStyle(PrimaryLoadingButtonStyle(isLoading: isWaitingForCompletion))
+                .disabled(!isContinueButtonEnabled)
+                .padding(Layout.defaultPadding)
+            }
+            .background(Color(.systemBackground))
+        }
+        // Disables large title to avoid a large gap below the navigation bar.
+        .navigationBarTitleDisplayMode(.inline)
+        .onReceive(viewModel.isContinueButtonEnabled) { isContinueButtonEnabled in
+            self.isContinueButtonEnabled = isContinueButtonEnabled
+        }
+    }
+}
+
+private enum Layout {
+    static let dividerHeight: CGFloat = 1
+    static let defaultPadding: EdgeInsets = .init(top: 10, leading: 16, bottom: 10, trailing: 16)
+}
+
+private enum Localization {
+    static let continueButtonTitle = NSLocalizedString("Continue", comment: "Title of the button to continue with a profiler question.")
+}
+
+#if DEBUG
+
+private final class StoreCreationQuestionPreviewViewModel: StoreCreationProfilerQuestionViewModel, RequiredStoreCreationProfilerQuestionViewModel {
+    let topHeader: String = "Store name"
+    let title: String = "This question is required"
+    let subtitle: String = "Choose an option to continue."
+    @Published private var isContinueButtonEnabledValue: Bool = false
+
+    var isContinueButtonEnabled: AnyPublisher<Bool, Never> {
+        $isContinueButtonEnabledValue.eraseToAnyPublisher()
+    }
+    func continueButtonTapped() async {}
+}
+
+struct RequiredStoreCreationProfilerQuestionView_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            RequiredStoreCreationProfilerQuestionView(viewModel: StoreCreationQuestionPreviewViewModel()) {
+                Text("question content")
+            }
+        }
+    }
+}
+
+#endif