Shipping Labels: Add new screen to select category for HAZMAT (#15368)

itsmeichigo · web-flow · commit f55a87c9dded · 2025-03-17T14:35:03.000+07:00
diff --git a/WooCommerce/Classes/AppDelegate.swift b/WooCommerce/Classes/AppDelegate.swift
@@ -294,7 +294,6 @@ private extension AppDelegate {
     func setupWooAppearance() {
         UINavigationBar.applyWooAppearance()
         UILabel.applyWooAppearance()
-        UISearchBar.applyWooAppearance()
         UITabBar.applyWooAppearance()
 
         // Take advantage of a bug in UIAlertController to style all UIAlertControllers with WC color
diff --git a/WooCommerce/Classes/Extensions/UISearchBar+Appearance.swift b/WooCommerce/Classes/Extensions/UISearchBar+Appearance.swift
@@ -1,31 +1,5 @@
 import UIKit
 
-
-// MARK: - UISearchBar + Woo
-//
-extension UISearchBar {
-
-    /// Applies the default WC's Appearance
-    ///
-    class func applyWooAppearance() {
-        let appearance = UISearchBar.appearance()
-        appearance.barTintColor = .basicBackground
-
-        appearance.layer.borderColor = UIColor.listSmallIcon.cgColor
-        appearance.layer.borderWidth = 1.0
-
-        let brandColor = UIColor.primary
-        appearance.tintColor = brandColor
-
-        let cancelButtonAttributes = [NSAttributedString.Key.foregroundColor: brandColor]
-        UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)
-
-        let textAttributes = [NSAttributedString.Key.foregroundColor: UIColor.textTertiary]
-        UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = textAttributes
-    }
-}
-
-
 // Setting the UITextField background color via the appearance proxy does not seem to work
 // As a workaround, this property exposes the texfield, so the background color can be set manually
 //
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatCategoryList.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatCategoryList.swift
@@ -0,0 +1,87 @@
+import SwiftUI
+
+struct WooShippingHazmatCategoryList: View {
+    private let categories: [ShippingLabelHazmatCategory] = {
+        ShippingLabelHazmatCategory.allCases.filter {
+            /// Filter out items that don't match the list on the web
+            let exceptions: [ShippingLabelHazmatCategory] = [.none, .class4, .class5, .class6]
+            return !exceptions.contains($0)
+        }
+    }()
+
+    private let selectionHandler: (ShippingLabelHazmatCategory) -> Void
+
+    @State private var selectedItem: ShippingLabelHazmatCategory?
+
+    @State private var query: String = ""
+
+    @Environment(\.dismiss) private var dismiss
+
+    var filteredCategories: [ShippingLabelHazmatCategory] {
+        if query.isEmpty {
+            return categories
+        } else {
+            return categories.filter { $0.localizedName.lowercased().contains(query.lowercased()) }
+        }
+    }
+
+    init(selectedItem: ShippingLabelHazmatCategory? = nil,
+         selectionHandler: @escaping (ShippingLabelHazmatCategory) -> Void) {
+        self.selectedItem = selectedItem
+        self.selectionHandler = selectionHandler
+    }
+
+    var body: some View {
+        NavigationStack {
+            List(filteredCategories, id: \.self) { category in
+                HStack {
+                    Image(systemName: "checkmark")
+                        .foregroundStyle(Color.accentColor)
+                        .opacity(selectedItem == category ? 1 : 0)
+
+                    Text(category.localizedName)
+                        .multilineTextAlignment(.leading)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+
+                    Image(systemName: "chevron.forward")
+                        .foregroundStyle(Color(.tertiaryLabel))
+                }
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    selectedItem = category
+                    selectionHandler(category)
+                }
+            }
+            .listStyle(.plain)
+            .navigationTitle(Localization.title)
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .cancellationAction) {
+                    Button(Localization.cancel) {
+                        dismiss()
+                    }
+                }
+            }
+            .searchable(text: $query)
+        }
+    }
+}
+
+private extension WooShippingHazmatCategoryList {
+    enum Localization {
+        static let title = NSLocalizedString(
+            "wooShippingHazmatCategoryList.title",
+            value: "Select Category",
+            comment: "Title of the screen to select a category for hazardous materials in the shipping label creation flow"
+        )
+        static let cancel = NSLocalizedString(
+            "wooShippingHazmatCategoryList.cancel",
+            value: "Cancel",
+            comment: "Button to dismiss the hazardous material category screen in the shipping label creation flow"
+        )
+    }
+}
+
+#Preview {
+    WooShippingHazmatCategoryList(selectionHandler: { _ in })
+}
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatDetailView.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatDetailView.swift
@@ -3,12 +3,17 @@ import SwiftUI
 struct WooShippingHazmatDetailView: View {
     @Environment(\.dismiss) private var dismiss
 
-    @Binding private var isHazardous: Bool
+    @State private var isHazardous: Bool
+
+    @State private var selectedCategory: ShippingLabelHazmatCategory?
 
     @State private var detailURL: URL?
 
-    init(isHazardous: Binding<Bool>) {
-        self._isHazardous = isHazardous
+    @State private var isShowingCategoryList = false
+
+    init(isHazardous: Bool, selectedCategory: ShippingLabelHazmatCategory?) {
+        self.isHazardous = isHazardous
+        self.selectedCategory = selectedCategory
     }
 
     var body: some View {
@@ -26,7 +31,7 @@ struct WooShippingHazmatDetailView: View {
                     }
 
                     Button(Localization.selectCategory) {
-                        // TODO: navigate to category list
+                        isShowingCategoryList = true
                     }
                     .buttonStyle(PrimaryButtonStyle())
                     .renderedIf(isHazardous)
@@ -57,6 +62,12 @@ struct WooShippingHazmatDetailView: View {
                 }
                 .toolbarBackground(Color.clear, for: .navigationBar)
             }
+            .sheet(isPresented: $isShowingCategoryList) {
+                WooShippingHazmatCategoryList(selectedItem: selectedCategory,
+                                              selectionHandler: { category in
+                    // TODO: dismiss view
+                })
+            }
         }
     }
 }
@@ -166,5 +177,6 @@ private extension WooShippingHazmatDetailView {
 }
 
 #Preview {
-    WooShippingHazmatDetailView(isHazardous: .constant(true))
+    WooShippingHazmatDetailView(isHazardous: true,
+                                selectedCategory: .airEligibleEthanol)
 }
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatRow.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatRow.swift
@@ -6,10 +6,15 @@ struct WooShippingHazmatRow: View {
 
     @Binding private var isHazardous: Bool
 
+    @Binding private var selectedCategory: ShippingLabelHazmatCategory?
+
     @State private var isShowingDetailView = false
 
-    init(isHazardous: Binding<Bool>, enabled: Bool) {
+    init(isHazardous: Binding<Bool>,
+         selectedCategory: Binding<ShippingLabelHazmatCategory?>,
+         enabled: Bool) {
         self._isHazardous = isHazardous
+        self._selectedCategory = selectedCategory
         self.enabled = enabled
     }
 
@@ -32,7 +37,8 @@ struct WooShippingHazmatRow: View {
         .buttonStyle(.plain)
         .disabled(!enabled)
         .sheet(isPresented: $isShowingDetailView) {
-            WooShippingHazmatDetailView(isHazardous: $isHazardous)
+            WooShippingHazmatDetailView(isHazardous: isHazardous,
+                                        selectedCategory: selectedCategory)
         }
     }
 }
@@ -61,6 +67,8 @@ private extension WooShippingHazmatRow {
 }
 
 #Preview {
-    WooShippingHazmatRow(isHazardous: .constant(false), enabled: true)
+    WooShippingHazmatRow(isHazardous: .constant(false),
+                         selectedCategory: .constant(nil),
+                         enabled: true)
         .padding()
 }
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsView.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsView.swift
@@ -111,6 +111,7 @@ private extension WooShippingCreateLabelsView {
                 WooShippingItems(viewModel: viewModel.items)
 
                 WooShippingHazmatRow(isHazardous: $viewModel.containsHazardousMaterials,
+                                     selectedCategory: $viewModel.hazmatCategory,
                                      enabled: !viewModel.canViewLabel)
 
                 WooShippingCustomsRow(informationIsCompleted: viewModel.customsInformationIsCompleted,
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsViewModel.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsViewModel.swift
@@ -22,6 +22,7 @@ final class WooShippingCreateLabelsViewModel: ObservableObject {
     private var debounceDuration: Double = 1
 
     @Published var containsHazardousMaterials = false
+    @Published var hazmatCategory: ShippingLabelHazmatCategory?
 
     @Published var labelPurchaseErrorNotice: Notice?
 
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -2794,6 +2794,7 @@
 		DEC0293A29C41BC500FD0E2F /* ApplicationPasswordAuthorizationViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC0293929C41BC500FD0E2F /* ApplicationPasswordAuthorizationViewModel.swift */; };
 		DEC1508227F450AC00F4487C /* CouponAllowedEmails.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC1508127F450AC00F4487C /* CouponAllowedEmails.swift */; };
 		DEC17AE02D82C513005A6E6D /* WooShippingHazmatDetailView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC17ADF2D82C513005A6E6D /* WooShippingHazmatDetailView.swift */; };
+		DEC1899A2D84197C005A6E6D /* WooShippingHazmatCategoryList.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC189992D84197C005A6E6D /* WooShippingHazmatCategoryList.swift */; };
 		DEC2961F26BD1605005A056B /* ShippingLabelCustomsFormListViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC2961E26BD1605005A056B /* ShippingLabelCustomsFormListViewModel.swift */; };
 		DEC2962126BD1627005A056B /* ShippingLabelCustomsFormList.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC2962026BD1627005A056B /* ShippingLabelCustomsFormList.swift */; };
 		DEC2962326BD4E6E005A056B /* ShippingLabelCustomsFormInput.swift in Sources */ = {isa = PBXBuildFile; fileRef = DEC2962226BD4E6E005A056B /* ShippingLabelCustomsFormInput.swift */; };
@@ -5999,6 +6000,7 @@
 		DEC0293929C41BC500FD0E2F /* ApplicationPasswordAuthorizationViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ApplicationPasswordAuthorizationViewModel.swift; sourceTree = "<group>"; };
 		DEC1508127F450AC00F4487C /* CouponAllowedEmails.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CouponAllowedEmails.swift; sourceTree = "<group>"; };
 		DEC17ADF2D82C513005A6E6D /* WooShippingHazmatDetailView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooShippingHazmatDetailView.swift; sourceTree = "<group>"; };
+		DEC189992D84197C005A6E6D /* WooShippingHazmatCategoryList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooShippingHazmatCategoryList.swift; sourceTree = "<group>"; };
 		DEC2961E26BD1605005A056B /* ShippingLabelCustomsFormListViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingLabelCustomsFormListViewModel.swift; sourceTree = "<group>"; };
 		DEC2962026BD1627005A056B /* ShippingLabelCustomsFormList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingLabelCustomsFormList.swift; sourceTree = "<group>"; };
 		DEC2962226BD4E6E005A056B /* ShippingLabelCustomsFormInput.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingLabelCustomsFormInput.swift; sourceTree = "<group>"; };
@@ -12347,6 +12349,7 @@
 			children = (
 				CE7B4A5A2CA1BF9900F764EB /* WooShippingHazmatRow.swift */,
 				DEC17ADF2D82C513005A6E6D /* WooShippingHazmatDetailView.swift */,
+				DEC189992D84197C005A6E6D /* WooShippingHazmatCategoryList.swift */,
 			);
 			path = "WooShipping Hazmat Section";
 			sourceTree = "<group>";
@@ -16426,6 +16429,7 @@
 				B97C6E562B15E51A008A2BF2 /* UpdateProductInventoryView.swift in Sources */,
 				268EC45F26CEA50C00716F5C /* EditCustomerNote.swift in Sources */,
 				DE7E5E862B4D11D7002E28D2 /* BlazeTargetDevicePickerViewModel.swift in Sources */,
+				DEC1899A2D84197C005A6E6D /* WooShippingHazmatCategoryList.swift in Sources */,
 				CE315DC62CC93CCE00A06748 /* WooShippingCarrier.swift in Sources */,
 				4535EE7E281BE04A004212B4 /* CouponAmountInputFormatter.swift in Sources */,
 				209AD3D22AC1EDF600825D76 /* WooPaymentsPayoutsCurrencyOverviewView.swift in Sources */,

Original file line number	Diff line number	Diff line change
`@@ -3,12 +3,17 @@ import SwiftUI`
`3`	`3`	`struct WooShippingHazmatDetailView: View {`
`4`	`4`	`@Environment(\.dismiss) private var dismiss`
`5`	`5`
`6`		`- @Binding private var isHazardous: Bool`
	`6`	`+ @State private var isHazardous: Bool`
	`7`	`+`
	`8`	`+ @State private var selectedCategory: ShippingLabelHazmatCategory?`
`7`	`9`
`8`	`10`	`@State private var detailURL: URL?`
`9`	`11`
`10`		`- init(isHazardous: Binding<Bool>) {`
`11`		`- self._isHazardous = isHazardous`
	`12`	`+ @State private var isShowingCategoryList = false`
	`13`	`+`
	`14`	`+ init(isHazardous: Bool, selectedCategory: ShippingLabelHazmatCategory?) {`
	`15`	`+ self.isHazardous = isHazardous`
	`16`	`+ self.selectedCategory = selectedCategory`
`12`	`17`	`}`
`13`	`18`
`14`	`19`	`var body: some View {`
`@@ -26,7 +31,7 @@ struct WooShippingHazmatDetailView: View {`
`26`	`31`	`}`
`27`	`32`
`28`	`33`	`Button(Localization.selectCategory) {`
`29`		`- // TODO: navigate to category list`
	`34`	`+ isShowingCategoryList = true`
`30`	`35`	`}`
`31`	`36`	`.buttonStyle(PrimaryButtonStyle())`
`32`	`37`	`.renderedIf(isHazardous)`
`@@ -57,6 +62,12 @@ struct WooShippingHazmatDetailView: View {`
`57`	`62`	`}`
`58`	`63`	`.toolbarBackground(Color.clear, for: .navigationBar)`
`59`	`64`	`}`
	`65`	`+ .sheet(isPresented: $isShowingCategoryList) {`
	`66`	`+ WooShippingHazmatCategoryList(selectedItem: selectedCategory,`
	`67`	`+ selectionHandler: { category in`
	`68`	`+ // TODO: dismiss view`
	`69`	`+ })`
	`70`	`+ }`
`60`	`71`	`}`
`61`	`72`	`}`
`62`	`73`	`}`
`@@ -166,5 +177,6 @@ private extension WooShippingHazmatDetailView {`
`166`	`177`	`}`
`167`	`178`
`168`	`179`	`#Preview {`
`169`		`- WooShippingHazmatDetailView(isHazardous: .constant(true))`
	`180`	`+ WooShippingHazmatDetailView(isHazardous: true,`
	`181`	`+ selectedCategory: .airEligibleEthanol)`
`170`	`182`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,10 +6,15 @@ struct WooShippingHazmatRow: View {`
`6`	`6`
`7`	`7`	`@Binding private var isHazardous: Bool`
`8`	`8`
	`9`	`+ @Binding private var selectedCategory: ShippingLabelHazmatCategory?`
	`10`	`+`
`9`	`11`	`@State private var isShowingDetailView = false`
`10`	`12`
`11`		`- init(isHazardous: Binding<Bool>, enabled: Bool) {`
	`13`	`+ init(isHazardous: Binding<Bool>,`
	`14`	`+ selectedCategory: Binding<ShippingLabelHazmatCategory?>,`
	`15`	`+ enabled: Bool) {`
`12`	`16`	`self._isHazardous = isHazardous`
	`17`	`+ self._selectedCategory = selectedCategory`
`13`	`18`	`self.enabled = enabled`
`14`	`19`	`}`
`15`	`20`
`@@ -32,7 +37,8 @@ struct WooShippingHazmatRow: View {`
`32`	`37`	`.buttonStyle(.plain)`
`33`	`38`	`.disabled(!enabled)`
`34`	`39`	`.sheet(isPresented: $isShowingDetailView) {`
`35`		`- WooShippingHazmatDetailView(isHazardous: $isHazardous)`
	`40`	`+ WooShippingHazmatDetailView(isHazardous: isHazardous,`
	`41`	`+ selectedCategory: selectedCategory)`
`36`	`42`	`}`
`37`	`43`	`}`
`38`	`44`	`}`
`@@ -61,6 +67,8 @@ private extension WooShippingHazmatRow {`
`61`	`67`	`}`
`62`	`68`
`63`	`69`	`#Preview {`
`64`		`- WooShippingHazmatRow(isHazardous: .constant(false), enabled: true)`
	`70`	`+ WooShippingHazmatRow(isHazardous: .constant(false),`
	`71`	`+ selectedCategory: .constant(nil),`
	`72`	`+ enabled: true)`
`65`	`73`	`.padding()`
`66`	`74`	`}`