Merge pull request #8545 from woocommerce/feat/8538-store-creation-support-cta

jaclync · web-flow · commit 3611a9d35a79 · 2023-01-05T14:19:24.000+08:00
Store creation: add support CTA to applicable screens
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryButton.swift b/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryButton.swift
@@ -30,9 +30,13 @@ struct StoreCreationCountryButton_Previews: PreviewProvider {
     static var previews: some View {
         VStack {
             StoreCreationCountryButton(countryCode: .US,
-                                       viewModel: .init(storeName: "", onContinue: { _ in }))
+                                       viewModel: .init(storeName: "",
+                                                        onContinue: { _ in },
+                                                        onSupport: {}))
             StoreCreationCountryButton(countryCode: .UM,
-                                       viewModel: .init(storeName: "", onContinue: { _ in }))
+                                       viewModel: .init(storeName: "",
+                                                        onContinue: { _ in },
+                                                        onSupport: {}))
         }
     }
 }
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryQuestionView.swift b/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryQuestionView.swift
@@ -58,7 +58,8 @@ struct StoreCreationCountryQuestionView_Previews: PreviewProvider {
         NavigationView {
             StoreCreationCountryQuestionView(viewModel: .init(storeName: "only in 2023",
                                                               currentLocale: Locale.init(identifier: "en_US"),
-                                                              onContinue: { _ in }))
+                                                              onContinue: { _ in },
+                                                              onSupport: {}))
         }
     }
 }
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryQuestionViewModel.swift b/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountryQuestionViewModel.swift
@@ -26,12 +26,15 @@ final class StoreCreationCountryQuestionViewModel: StoreCreationProfilerQuestion
     @Published private var isContinueButtonEnabledValue: Bool = false
 
     private let onContinue: (CountryCode) -> Void
+    private let onSupport: () -> Void
 
     init(storeName: String,
          currentLocale: Locale = .current,
-         onContinue: @escaping (CountryCode) -> Void) {
+         onContinue: @escaping (CountryCode) -> Void,
+         onSupport: @escaping () -> Void) {
         self.topHeader = storeName
         self.onContinue = onContinue
+        self.onSupport = onSupport
 
         currentCountryCode = currentLocale.regionCode.map { CountryCode(rawValue: $0) } ?? nil
         selectedCountryCode = currentCountryCode
@@ -65,6 +68,10 @@ extension StoreCreationCountryQuestionViewModel: RequiredStoreCreationProfilerQu
         }
         onContinue(selectedCountryCode)
     }
+
+    func supportButtonTapped() {
+        onSupport()
+    }
 }
 
 extension StoreCreationCountryQuestionViewModel {
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountrySectionView.swift b/WooCommerce/Classes/Authentication/Store Creation/Profiler/Country/StoreCreationCountrySectionView.swift
@@ -28,6 +28,6 @@ struct StoreCreationCountrySectionView: View {
 
 struct StoreCreationCountrySectionView_Previews: PreviewProvider {
     static var previews: some View {
-        StoreCreationCountrySectionView(header: "EXAMPLES", countryCodes: [.FJ, .UM, .US], viewModel: .init(storeName: "", onContinue: { _ in }))
+        StoreCreationCountrySectionView(header: "EXAMPLES", countryCodes: [.FJ, .UM, .US], viewModel: .init(storeName: "", onContinue: { _ in }, onSupport: {}))
     }
 }
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Profiler/RequiredStoreCreationProfilerQuestionView.swift b/WooCommerce/Classes/Authentication/Store Creation/Profiler/RequiredStoreCreationProfilerQuestionView.swift
@@ -7,6 +7,9 @@ protocol RequiredStoreCreationProfilerQuestionViewModel {
     /// Called when the continue button is tapped.
     func continueButtonTapped() async
 
+    /// Called when the Help & Support button is tapped.
+    func supportButtonTapped()
+
     /// Whether the continue button is enabled for the user to continue.
     var isContinueButtonEnabled: AnyPublisher<Bool, Never> { get }
 }
@@ -46,6 +49,13 @@ struct RequiredStoreCreationProfilerQuestionView<QuestionContent: View>: View {
             }
             .background(Color(.systemBackground))
         }
+        .toolbar {
+            ToolbarItem(placement: .navigationBarTrailing) {
+                SupportButton {
+                    viewModel.supportButtonTapped()
+                }
+            }
+        }
         // Disables large title to avoid a large gap below the navigation bar.
         .navigationBarTitleDisplayMode(.inline)
         .onReceive(viewModel.isContinueButtonEnabled) { isContinueButtonEnabled in
@@ -75,6 +85,7 @@ private final class StoreCreationQuestionPreviewViewModel: StoreCreationProfiler
         $isContinueButtonEnabledValue.eraseToAnyPublisher()
     }
     func continueButtonTapped() async {}
+    func supportButtonTapped() {}
 }
 
 struct RequiredStoreCreationProfilerQuestionView_Previews: PreviewProvider {
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Store name/StoreNameForm.swift b/WooCommerce/Classes/Authentication/Store Creation/Store name/StoreNameForm.swift
@@ -2,18 +2,12 @@ import SwiftUI
 
 /// Hosting controller that wraps the `StoreNameForm`.
 final class StoreNameFormHostingController: UIHostingController<StoreNameForm> {
-    private let onContinue: (String) -> Void
-    private let onClose: () -> Void
-
     init(onContinue: @escaping (String) -> Void,
-         onClose: @escaping () -> Void) {
-        self.onContinue = onContinue
-        self.onClose = onClose
-        super.init(rootView: StoreNameForm())
-
-        rootView.onContinue = { [weak self] storeName in
-            self?.onContinue(storeName)
-        }
+         onClose: @escaping () -> Void,
+         onSupport: @escaping () -> Void) {
+        super.init(rootView: StoreNameForm(onContinue: onContinue,
+                                           onClose: onClose,
+                                           onSupport: onSupport))
     }
 
     @available(*, unavailable)
@@ -24,38 +18,15 @@ final class StoreNameFormHostingController: UIHostingController<StoreNameForm> {
     override func viewDidLoad() {
         super.viewDidLoad()
 
-        configureNavigationBarAppearance()
-    }
-
-    /// Shows a transparent navigation bar without a bottom border and with a close button to dismiss.
-    func configureNavigationBarAppearance() {
-        addCloseNavigationBarButton(title: Localization.cancelButtonTitle,
-                                    target: self,
-                                    action: #selector(closeButtonTapped))
-        let appearance = UINavigationBarAppearance()
-        appearance.configureWithTransparentBackground()
-        appearance.backgroundColor = .systemBackground
-
-        navigationItem.standardAppearance = appearance
-        navigationItem.scrollEdgeAppearance = appearance
-        navigationItem.compactAppearance = appearance
-    }
-
-    @objc private func closeButtonTapped() {
-        onClose()
-    }
-}
-
-private extension StoreNameFormHostingController {
-    enum Localization {
-        static let cancelButtonTitle = NSLocalizedString("Cancel", comment: "Navigation bar button on the store name form to leave the store creation flow.")
+        configureTransparentNavigationBar()
     }
 }
 
 /// Allows the user to enter a store name during the store creation flow.
 struct StoreNameForm: View {
-    /// Set in the hosting controller.
-    var onContinue: (String) -> Void = { _ in }
+    let onContinue: (String) -> Void
+    let onClose: () -> Void
+    let onSupport: () -> Void
 
     @State private var name: String = ""
 
@@ -104,6 +75,19 @@ struct StoreNameForm: View {
             .buttonStyle(PrimaryButtonStyle())
             .disabled(name.isEmpty)
         }
+        .toolbar {
+            ToolbarItem(placement: .navigationBarLeading) {
+                Button(Localization.cancelButtonTitle) {
+                    onClose()
+                }
+                .buttonStyle(TextButtonStyle())
+            }
+            ToolbarItem(placement: .navigationBarTrailing) {
+                SupportButton {
+                    onSupport()
+                }
+            }
+        }
         // Disables large title to avoid a large gap below the navigation bar.
         .navigationBarTitleDisplayMode(.inline)
         // Hides the back button and shows a close button in the hosting controller instead.
@@ -148,11 +132,19 @@ private extension StoreNameForm {
             "Continue",
             comment: "Title of the button on the store creation store name form to continue."
         )
+        static let cancelButtonTitle = NSLocalizedString(
+            "Cancel",
+            comment: "Navigation bar button on the store name form to leave the store creation flow."
+        )
     }
 }
 
 struct StoreNameForm_Previews: PreviewProvider {
     static var previews: some View {
-        StoreNameForm()
+        NavigationView {
+            StoreNameForm(onContinue: { _ in },
+                          onClose: {},
+                          onSupport: {})
+        }
     }
 }
diff --git a/WooCommerce/Classes/Authentication/Store Creation/StoreCreationCoordinator.swift b/WooCommerce/Classes/Authentication/Store Creation/StoreCreationCoordinator.swift
@@ -148,6 +148,8 @@ private extension StoreCreationCoordinator {
             }
         } onClose: { [weak self] in
             self?.showDiscardChangesAlert(flow: .native)
+        } onSupport: { [weak self] in
+            self?.showSupport(from: navigationController)
         }
         navigationController.pushViewController(storeNameForm, animated: true)
         analytics.track(event: .StoreCreation.siteCreationStep(step: .storeName))
@@ -297,6 +299,10 @@ private extension StoreCreationCoordinator {
         // Presents the alert with the presented webview.
         navigationController.presentedViewController?.present(alert, animated: true)
     }
+
+    func showSupport(from navigationController: UINavigationController) {
+        ZendeskProvider.shared.showNewRequestIfPossible(from: navigationController, with: "origin:store-creation")
+    }
 }
 
 // MARK: - Store creation M2
@@ -349,13 +355,15 @@ private extension StoreCreationCoordinator {
                                   planToPurchase: WPComPlanProduct) {
         let questionController = StoreCreationCountryQuestionHostingController(viewModel:
                 .init(storeName: storeName) { [weak self] countryCode in
-            guard let self else { return }
-            self.showDomainSelector(from: navigationController,
-                                    storeName: storeName,
-                                    categoryName: categoryName,
-                                    countryCode: countryCode,
-                                    planToPurchase: planToPurchase)
-        })
+                    guard let self else { return }
+                    self.showDomainSelector(from: navigationController,
+                                            storeName: storeName,
+                                            categoryName: categoryName,
+                                            countryCode: countryCode,
+                                            planToPurchase: planToPurchase)
+                } onSupport: { [weak self] in
+                    self?.showSupport(from: navigationController)
+                })
         navigationController.pushViewController(questionController, animated: true)
         // TODO: analytics
     }
@@ -375,6 +383,8 @@ private extension StoreCreationCoordinator {
                                                             countryCode: countryCode,
                                                             domain: domain,
                                                             planToPurchase: planToPurchase)
+        }, onSupport: { [weak self] in
+            self?.showSupport(from: navigationController)
         })
         navigationController.pushViewController(domainSelector, animated: true)
         analytics.track(event: .StoreCreation.siteCreationStep(step: .domainPicker))
@@ -426,6 +436,8 @@ private extension StoreCreationCoordinator {
                                planToPurchase: planToPurchase,
                                siteID: result.siteID,
                                siteSlug: result.siteSlug)
+        } onSupport: { [weak self] in
+            self?.showSupport(from: navigationController)
         }
         navigationController.pushViewController(storeSummary, animated: true)
         analytics.track(event: .StoreCreation.siteCreationStep(step: .storeSummary))
diff --git a/WooCommerce/Classes/Authentication/Store Creation/StoreCreationSummaryView.swift b/WooCommerce/Classes/Authentication/Store Creation/StoreCreationSummaryView.swift
@@ -2,16 +2,12 @@ import SwiftUI
 
 /// Hosting controller that wraps the `StoreCreationSummaryView`.
 final class StoreCreationSummaryHostingController: UIHostingController<StoreCreationSummaryView> {
-    private let onContinueToPayment: () -> Void
-
     init(viewModel: StoreCreationSummaryViewModel,
-         onContinueToPayment: @escaping () -> Void) {
-        self.onContinueToPayment = onContinueToPayment
-        super.init(rootView: StoreCreationSummaryView(viewModel: viewModel))
-
-        rootView.onContinueToPayment = { [weak self] in
-            self?.onContinueToPayment()
-        }
+         onContinueToPayment: @escaping () -> Void,
+         onSupport: @escaping () -> Void) {
+        super.init(rootView: StoreCreationSummaryView(viewModel: viewModel,
+                                                      onContinueToPayment: onContinueToPayment,
+                                                      onSupport: onSupport))
     }
 
     @available(*, unavailable)
@@ -52,13 +48,17 @@ struct StoreCreationSummaryViewModel {
 
 /// Displays a summary of the store creation flow with the store information (e.g. store name, store slug).
 struct StoreCreationSummaryView: View {
-    /// Set in the hosting controller.
-    var onContinueToPayment: (() -> Void) = {}
+    private let onContinueToPayment: () -> Void
+    private let onSupport: () -> Void
 
     private let viewModel: StoreCreationSummaryViewModel
 
-    init(viewModel: StoreCreationSummaryViewModel) {
+    init(viewModel: StoreCreationSummaryViewModel,
+         onContinueToPayment: @escaping () -> Void,
+         onSupport: @escaping () -> Void) {
         self.viewModel = viewModel
+        self.onContinueToPayment = onContinueToPayment
+        self.onSupport = onSupport
     }
 
     var body: some View {
@@ -126,6 +126,13 @@ struct StoreCreationSummaryView: View {
                 .padding(Layout.defaultButtonPadding)
             }
         }
+        .toolbar {
+            ToolbarItem(placement: .navigationBarTrailing) {
+                SupportButton {
+                    onSupport()
+                }
+            }
+        }
         .navigationTitle(Localization.title)
         .navigationBarTitleDisplayMode(.large)
     }
@@ -168,12 +175,16 @@ struct StoreCreationSummaryView_Previews: PreviewProvider {
                 .init(storeName: "Fruity shop",
                       storeSlug: "fruityshop.com",
                       categoryName: "Arts and Crafts",
-                      countryCode: .UG))
+                      countryCode: .UG),
+                                 onContinueToPayment: {},
+                                 onSupport: {})
         StoreCreationSummaryView(viewModel:
                 .init(storeName: "Fruity shop",
                       storeSlug: "fruityshop.com",
                       categoryName: "Arts and Crafts",
-                      countryCode: nil))
+                      countryCode: nil),
+                                 onContinueToPayment: {},
+                                 onSupport: {})
         .preferredColorScheme(.dark)
     }
 }
diff --git a/WooCommerce/Classes/Authentication/Store Creation/SupportButton.swift b/WooCommerce/Classes/Authentication/Store Creation/SupportButton.swift
@@ -0,0 +1,32 @@
+import SwiftUI
+
+/// A support button with a help icon that is currently shown in the navigation bar.
+struct SupportButton: View {
+    let onTapped: () -> Void
+
+    var body: some View {
+        Button {
+            onTapped()
+        } label: {
+            Image(uiImage: .helpOutlineImage)
+                .renderingMode(.template)
+                .linkStyle()
+        }
+        .accessibilityLabel(Localization.accessibilityLabel)
+    }
+}
+
+private extension SupportButton {
+    enum Localization {
+        static let accessibilityLabel = NSLocalizedString(
+            "Help & Support",
+            comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."
+        )
+    }
+}
+
+struct SupportButton_Previews: PreviewProvider {
+    static var previews: some View {
+        SupportButton(onTapped: {})
+    }
+}
diff --git a/WooCommerce/Classes/Extensions/UIImage+Woo.swift b/WooCommerce/Classes/Extensions/UIImage+Woo.swift
@@ -361,6 +361,12 @@ extension UIImage {
         return UIImage.gridicon(.heartOutline)
     }
 
+    /// Help Outline
+    ///
+    static var helpOutlineImage: UIImage {
+        return UIImage.gridicon(.helpOutline)
+    }
+
     /// House Image
     ///
     static var houseImage: UIImage {
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Settings/Domains/DomainSelectorView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Settings/Domains/DomainSelectorView.swift
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
diff --git a/WooCommerce/WooCommerceTests/Authentication/Store Creation/Profiler/StoreCreationCountryQuestionViewModelTests.swift b/WooCommerce/WooCommerceTests/Authentication/Store Creation/Profiler/StoreCreationCountryQuestionViewModelTests.swift
diff --git a/WooCommerce/WooCommerceTests/Extensions/IconsTests.swift b/WooCommerce/WooCommerceTests/Extensions/IconsTests.swift

Original file line number	Diff line number	Diff line change
`@@ -30,9 +30,13 @@ struct StoreCreationCountryButton_Previews: PreviewProvider {`
`30`	`30`	`static var previews: some View {`
`31`	`31`	`VStack {`
`32`	`32`	`StoreCreationCountryButton(countryCode: .US,`
`33`		`- viewModel: .init(storeName: "", onContinue: { _ in }))`
	`33`	`+ viewModel: .init(storeName: "",`
	`34`	`+ onContinue: { _ in },`
	`35`	`+ onSupport: {}))`
`34`	`36`	`StoreCreationCountryButton(countryCode: .UM,`
`35`		`- viewModel: .init(storeName: "", onContinue: { _ in }))`
	`37`	`+ viewModel: .init(storeName: "",`
	`38`	`+ onContinue: { _ in },`
	`39`	`+ onSupport: {}))`
`36`	`40`	`}`
`37`	`41`	`}`
`38`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,8 @@ struct StoreCreationCountryQuestionView_Previews: PreviewProvider {`
`58`	`58`	`NavigationView {`
`59`	`59`	`StoreCreationCountryQuestionView(viewModel: .init(storeName: "only in 2023",`
`60`	`60`	`currentLocale: Locale.init(identifier: "en_US"),`
`61`		`- onContinue: { _ in }))`
	`61`	`+ onContinue: { _ in },`
	`62`	`+ onSupport: {}))`
`62`	`63`	`}`
`63`	`64`	`}`
`64`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,6 @@ struct StoreCreationCountrySectionView: View {`
`28`	`28`
`29`	`29`	`struct StoreCreationCountrySectionView_Previews: PreviewProvider {`
`30`	`30`	`static var previews: some View {`
`31`		`- StoreCreationCountrySectionView(header: "EXAMPLES", countryCodes: [.FJ, .UM, .US], viewModel: .init(storeName: "", onContinue: { _ in }))`
	`31`	`+ StoreCreationCountrySectionView(header: "EXAMPLES", countryCodes: [.FJ, .UM, .US], viewModel: .init(storeName: "", onContinue: { _ in }, onSupport: {}))`
`32`	`32`	`}`
`33`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,9 @@ protocol RequiredStoreCreationProfilerQuestionViewModel {`
`7`	`7`	`/// Called when the continue button is tapped.`
`8`	`8`	`func continueButtonTapped() async`
`9`	`9`
	`10`	`+ /// Called when the Help & Support button is tapped.`
	`11`	`+ func supportButtonTapped()`
	`12`	`+`
`10`	`13`	`/// Whether the continue button is enabled for the user to continue.`
`11`	`14`	`var isContinueButtonEnabled: AnyPublisher<Bool, Never> { get }`
`12`	`15`	`}`
`@@ -46,6 +49,13 @@ struct RequiredStoreCreationProfilerQuestionView<QuestionContent: View>: View {`
`46`	`49`	`}`
`47`	`50`	`.background(Color(.systemBackground))`
`48`	`51`	`}`
	`52`	`+ .toolbar {`
	`53`	`+ ToolbarItem(placement: .navigationBarTrailing) {`
	`54`	`+ SupportButton {`
	`55`	`+ viewModel.supportButtonTapped()`
	`56`	`+ }`
	`57`	`+ }`
	`58`	`+ }`
`49`	`59`	`// Disables large title to avoid a large gap below the navigation bar.`
`50`	`60`	`.navigationBarTitleDisplayMode(.inline)`
`51`	`61`	`.onReceive(viewModel.isContinueButtonEnabled) { isContinueButtonEnabled in`
`@@ -75,6 +85,7 @@ private final class StoreCreationQuestionPreviewViewModel: StoreCreationProfiler`
`75`	`85`	`$isContinueButtonEnabledValue.eraseToAnyPublisher()`
`76`	`86`	`}`
`77`	`87`	`func continueButtonTapped() async {}`
	`88`	`+ func supportButtonTapped() {}`
`78`	`89`	`}`
`79`	`90`
`80`	`91`	`struct RequiredStoreCreationProfilerQuestionView_Previews: PreviewProvider {`