Refactor support button UI to a SwiftUI view.

jaclync · jaclync · commit b7fd7ea651ac · 2023-01-04T17:09:38.000+08:00
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Profiler/RequiredStoreCreationProfilerQuestionView.swift b/WooCommerce/Classes/Authentication/Store Creation/Profiler/RequiredStoreCreationProfilerQuestionView.swift
@@ -51,14 +51,9 @@ struct RequiredStoreCreationProfilerQuestionView<QuestionContent: View>: View {
         }
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
-                Button {
+                SupportButton{
                     viewModel.supportButtonTapped()
-                } label: {
-                    Image(uiImage: .helpOutlineImage)
-                        .renderingMode(.template)
-                        .linkStyle()
                 }
-                .accessibilityLabel(Localization.supportButtonAccessibilityLabel)
             }
         }
         // Disables large title to avoid a large gap below the navigation bar.
@@ -76,10 +71,6 @@ private enum Layout {
 
 private enum Localization {
     static let continueButtonTitle = NSLocalizedString("Continue", comment: "Title of the button to continue with a profiler question.")
-    static let supportButtonAccessibilityLabel = NSLocalizedString(
-        "Help & Support",
-        comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."
-    )
 }
 
 #if DEBUG
diff --git a/WooCommerce/Classes/Authentication/Store Creation/Store name/StoreNameForm.swift b/WooCommerce/Classes/Authentication/Store Creation/Store name/StoreNameForm.swift
@@ -83,14 +83,9 @@ struct StoreNameForm: View {
                 .buttonStyle(TextButtonStyle())
             }
             ToolbarItem(placement: .navigationBarTrailing) {
-                Button {
+                SupportButton {
                     onSupport()
-                } label: {
-                    Image(uiImage: .helpOutlineImage)
-                        .renderingMode(.template)
-                        .linkStyle()
                 }
-                .accessibilityLabel(Localization.supportButtonAccessibilityLabel)
             }
         }
         // Disables large title to avoid a large gap below the navigation bar.
@@ -141,10 +136,6 @@ private extension StoreNameForm {
             "Cancel",
             comment: "Navigation bar button on the store name form to leave the store creation flow."
         )
-        static let supportButtonAccessibilityLabel = NSLocalizedString(
-            "Help & Support",
-            comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."
-        )
     }
 }
 
diff --git a/WooCommerce/Classes/Authentication/Store Creation/StoreCreationSummaryView.swift b/WooCommerce/Classes/Authentication/Store Creation/StoreCreationSummaryView.swift
@@ -128,14 +128,9 @@ struct StoreCreationSummaryView: View {
         }
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
-                Button {
+                SupportButton {
                     onSupport()
-                } label: {
-                    Image(uiImage: .helpOutlineImage)
-                        .renderingMode(.template)
-                        .linkStyle()
                 }
-                .accessibilityLabel(Localization.supportButtonAccessibilityLabel)
             }
         }
         .navigationTitle(Localization.title)
@@ -164,10 +159,6 @@ private extension StoreCreationSummaryView {
             "Continue to Payment",
             comment: "Title of the button on the store creation summary view to continue to payment."
         )
-        static let supportButtonAccessibilityLabel = NSLocalizedString(
-            "Help & Support",
-            comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."
-        )
     }
 }
 
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/ViewRelated/Dashboard/Settings/Domains/DomainSelectorView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Settings/Domains/DomainSelectorView.swift
@@ -183,14 +183,9 @@ struct DomainSelectorView: View {
         }
         .toolbar {
             ToolbarItem(placement: .navigationBarTrailing) {
-                Button {
+                SupportButton {
                     onSupport()
-                } label: {
-                    Image(uiImage: .helpOutlineImage)
-                        .renderingMode(.template)
-                        .linkStyle()
                 }
-                .accessibilityLabel(Localization.supportButtonAccessibilityLabel)
             }
         }
         .navigationTitle(Localization.title)
@@ -219,10 +214,6 @@ private extension DomainSelectorView {
         static let searchPlaceholder = NSLocalizedString("Type a name for your store", comment: "Placeholder of the search text field on the domain selector.")
         static let suggestionsHeader = NSLocalizedString("SUGGESTIONS", comment: "Header label of the domain suggestions on the domain selector.")
         static let continueButtonTitle = NSLocalizedString("Continue", comment: "Title of the button to continue with a selected domain.")
-        static let supportButtonAccessibilityLabel = NSLocalizedString(
-            "Help & Support",
-            comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."
-        )
     }
 }
 
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -413,6 +413,7 @@
 		02CEBB8024C9869E002EDF35 /* ProductFormActionsFactoryProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CEBB7F24C9869E002EDF35 /* ProductFormActionsFactoryProtocol.swift */; };
 		02CEBB8224C98861002EDF35 /* ProductFormDataModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CEBB8124C98861002EDF35 /* ProductFormDataModel.swift */; };
 		02CEBB8424C99A10002EDF35 /* Product+ShippingTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CEBB8324C99A10002EDF35 /* Product+ShippingTests.swift */; };
+		02D3B68529657061009BF0BC /* SupportButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02D3B68429657061009BF0BC /* SupportButton.swift */; };
 		02D45647231CB1FB008CF0A9 /* UIImage+Dot.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02D45646231CB1FB008CF0A9 /* UIImage+Dot.swift */; };
 		02DAE7FC291B7B8B009342B7 /* DomainSelectorViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02DAE7FB291B7B8B009342B7 /* DomainSelectorViewModel.swift */; };
 		02DAE7FF291B8C8A009342B7 /* DomainSelectorViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02DAE7FE291B8C8A009342B7 /* DomainSelectorViewModelTests.swift */; };
@@ -2468,6 +2469,7 @@
 		02CEBB7F24C9869E002EDF35 /* ProductFormActionsFactoryProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductFormActionsFactoryProtocol.swift; sourceTree = "<group>"; };
 		02CEBB8124C98861002EDF35 /* ProductFormDataModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductFormDataModel.swift; sourceTree = "<group>"; };
 		02CEBB8324C99A10002EDF35 /* Product+ShippingTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Product+ShippingTests.swift"; sourceTree = "<group>"; };
+		02D3B68429657061009BF0BC /* SupportButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SupportButton.swift; sourceTree = "<group>"; };
 		02D45646231CB1FB008CF0A9 /* UIImage+Dot.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+Dot.swift"; sourceTree = "<group>"; };
 		02DAE7FB291B7B8B009342B7 /* DomainSelectorViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DomainSelectorViewModel.swift; sourceTree = "<group>"; };
 		02DAE7FE291B8C8A009342B7 /* DomainSelectorViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DomainSelectorViewModelTests.swift; sourceTree = "<group>"; };
@@ -4808,6 +4810,7 @@
 				02E3B63029066858007E0F13 /* StoreCreationCoordinator.swift */,
 				02EAA4C7290F992B00918DAB /* LoggedOutStoreCreationCoordinator.swift */,
 				021940E7291FDBF90090354E /* StoreCreationSummaryView.swift */,
+				02D3B68429657061009BF0BC /* SupportButton.swift */,
 			);
 			path = "Store Creation";
 			sourceTree = "<group>";
@@ -10337,6 +10340,7 @@
 				451A04EC2386D2B300E368C9 /* ProductImagesCollectionViewDataSource.swift in Sources */,
 				02DD81F9242CAA400060E50B /* WordPressMediaLibraryImagePickerViewController.swift in Sources */,
 				D8C2A28823190B2300F503E9 /* StorageProductReview+Woo.swift in Sources */,
+				02D3B68529657061009BF0BC /* SupportButton.swift in Sources */,
 				2664210126F3E1BB001FC5B4 /* ModalHostingPresentationController.swift in Sources */,
 				D8B4D5F026C2C7EC00F34E94 /* InPersonPaymentsStripeAccountPendingView.swift in Sources */,
 				B92639FF293E2D4C00A257E0 /* JustInTimeMessagesProvider.swift in Sources */,

Original file line number	Diff line number	Diff line change
`@@ -51,14 +51,9 @@ struct RequiredStoreCreationProfilerQuestionView<QuestionContent: View>: View {`
`51`	`51`	`}`
`52`	`52`	`.toolbar {`
`53`	`53`	`ToolbarItem(placement: .navigationBarTrailing) {`
`54`		`- Button {`
	`54`	`+ SupportButton{`
`55`	`55`	`viewModel.supportButtonTapped()`
`56`		`- } label: {`
`57`		`- Image(uiImage: .helpOutlineImage)`
`58`		`- .renderingMode(.template)`
`59`		`- .linkStyle()`
`60`	`56`	`}`
`61`		`- .accessibilityLabel(Localization.supportButtonAccessibilityLabel)`
`62`	`57`	`}`
`63`	`58`	`}`
`64`	`59`	`// Disables large title to avoid a large gap below the navigation bar.`
`@@ -76,10 +71,6 @@ private enum Layout {`
`76`	`71`
`77`	`72`	`private enum Localization {`
`78`	`73`	`static let continueButtonTitle = NSLocalizedString("Continue", comment: "Title of the button to continue with a profiler question.")`
`79`		`- static let supportButtonAccessibilityLabel = NSLocalizedString(`
`80`		`- "Help & Support",`
`81`		`- comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."`
`82`		`- )`
`83`	`74`	`}`
`84`	`75`
`85`	`76`	`#if DEBUG`
Original file line number	Diff line number	Diff line change
`@@ -83,14 +83,9 @@ struct StoreNameForm: View {`
`83`	`83`	`.buttonStyle(TextButtonStyle())`
`84`	`84`	`}`
`85`	`85`	`ToolbarItem(placement: .navigationBarTrailing) {`
`86`		`- Button {`
	`86`	`+ SupportButton {`
`87`	`87`	`onSupport()`
`88`		`- } label: {`
`89`		`- Image(uiImage: .helpOutlineImage)`
`90`		`- .renderingMode(.template)`
`91`		`- .linkStyle()`
`92`	`88`	`}`
`93`		`- .accessibilityLabel(Localization.supportButtonAccessibilityLabel)`
`94`	`89`	`}`
`95`	`90`	`}`
`96`	`91`	`// Disables large title to avoid a large gap below the navigation bar.`
`@@ -141,10 +136,6 @@ private extension StoreNameForm {`
`141`	`136`	`"Cancel",`
`142`	`137`	`comment: "Navigation bar button on the store name form to leave the store creation flow."`
`143`	`138`	`)`
`144`		`- static let supportButtonAccessibilityLabel = NSLocalizedString(`
`145`		`- "Help & Support",`
`146`		`- comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."`
`147`		`- )`
`148`	`139`	`}`
`149`	`140`	`}`
`150`	`141`
Original file line number	Diff line number	Diff line change
`@@ -128,14 +128,9 @@ struct StoreCreationSummaryView: View {`
`128`	`128`	`}`
`129`	`129`	`.toolbar {`
`130`	`130`	`ToolbarItem(placement: .navigationBarTrailing) {`
`131`		`- Button {`
	`131`	`+ SupportButton {`
`132`	`132`	`onSupport()`
`133`		`- } label: {`
`134`		`- Image(uiImage: .helpOutlineImage)`
`135`		`- .renderingMode(.template)`
`136`		`- .linkStyle()`
`137`	`133`	`}`
`138`		`- .accessibilityLabel(Localization.supportButtonAccessibilityLabel)`
`139`	`134`	`}`
`140`	`135`	`}`
`141`	`136`	`.navigationTitle(Localization.title)`
`@@ -164,10 +159,6 @@ private extension StoreCreationSummaryView {`
`164`	`159`	`"Continue to Payment",`
`165`	`160`	`comment: "Title of the button on the store creation summary view to continue to payment."`
`166`	`161`	`)`
`167`		`- static let supportButtonAccessibilityLabel = NSLocalizedString(`
`168`		`- "Help & Support",`
`169`		`- comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."`
`170`		`- )`
`171`	`162`	`}`
`172`	`163`	`}`
`173`	`164`
Original file line number	Diff line number	Diff line change
`@@ -183,14 +183,9 @@ struct DomainSelectorView: View {`
`183`	`183`	`}`
`184`	`184`	`.toolbar {`
`185`	`185`	`ToolbarItem(placement: .navigationBarTrailing) {`
`186`		`- Button {`
	`186`	`+ SupportButton {`
`187`	`187`	`onSupport()`
`188`		`- } label: {`
`189`		`- Image(uiImage: .helpOutlineImage)`
`190`		`- .renderingMode(.template)`
`191`		`- .linkStyle()`
`192`	`188`	`}`
`193`		`- .accessibilityLabel(Localization.supportButtonAccessibilityLabel)`
`194`	`189`	`}`
`195`	`190`	`}`
`196`	`191`	`.navigationTitle(Localization.title)`
`@@ -219,10 +214,6 @@ private extension DomainSelectorView {`
`219`	`214`	`static let searchPlaceholder = NSLocalizedString("Type a name for your store", comment: "Placeholder of the search text field on the domain selector.")`
`220`	`215`	`static let suggestionsHeader = NSLocalizedString("SUGGESTIONS", comment: "Header label of the domain suggestions on the domain selector.")`
`221`	`216`	`static let continueButtonTitle = NSLocalizedString("Continue", comment: "Title of the button to continue with a selected domain.")`
`222`		`- static let supportButtonAccessibilityLabel = NSLocalizedString(`
`223`		`- "Help & Support",`
`224`		`- comment: "Accessibility label for the Help & Support image navigation bar button in the store creation flow."`
`225`		`- )`
`226`	`217`	`}`
`227`	`218`	`}`
`228`	`219`