Shipping Label: Edit and remove HAZMAT category (#15405)

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatDetailView.swift

@@ -35,11 +35,38 @@ struct WooShippingHazmatDetailView: View {
                     }
                     .tint(Color.accentColor)
 
-                    Button(Localization.selectCategory) {
-                        isShowingCategoryList = true
+                    if isHazardous {
+                        if let selectedCategory {
+                            HStack {
+                                Text(Localization.category)
+                                    .headlineStyle()
+                                Spacer()
+                                Button {
+                                    isShowingCategoryList = true
+                                } label: {
+                                    Image(systemName: "pencil")
+                                }
+                                .buttonStyle(.plain)
+                                .font(.body)
+                                .foregroundStyle(Color.accentColor)
+                            }
+
+                            Text(selectedCategory.localizedName)
+                                .font(.body)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                                .multilineTextAlignment(.leading)
+                                .padding(Constants.verticalSpacing)
+                                .background(
+                                    Color(.quaternarySystemFill)
+                                        .clipShape(RoundedRectangle(cornerSize: Constants.cornerSize))
+                                )
+                        } else {
+                            Button(Localization.selectCategory) {
+                                isShowingCategoryList = true
+                            }
+                            .buttonStyle(PrimaryButtonStyle())
+                        }
                     }
-                    .buttonStyle(PrimaryButtonStyle())
-                    .renderedIf(isHazardous)
 
                     Divider()
 
@@ -67,6 +94,18 @@ struct WooShippingHazmatDetailView: View {
                 }
                 .toolbarBackground(Color.clear, for: .navigationBar)
             }
+            .safeAreaInset(edge: .bottom) {
+                VStack {
+                    Button(Localization.save) {
+                        selectionHandler(nil)
+                        dismiss()
+                    }
+                    .buttonStyle(PrimaryButtonStyle())
+                    .padding(Constants.verticalSpacing)
+                }
+                .background(Color(.systemBackground))
+                .renderedIf(selectedCategory != nil && isHazardous == false)
+            }
             .sheet(isPresented: $isShowingCategoryList) {
                 WooShippingHazmatCategoryList(selectedItem: selectedCategory,
                                               selectionHandler: { category in
@@ -128,6 +167,7 @@ private extension WooShippingHazmatDetailView {
 private extension WooShippingHazmatDetailView {
     enum Constants {
         static let verticalSpacing: CGFloat = 16
+        static let cornerSize = CGSize(width: 8, height: 8)
         static let hazmatURL = "https://www.usps.com/hazmat"
         static let searchToolURL = "https://pe.usps.com/hazmat/index"
         static let DHLExpressName = "DHL Express"
@@ -154,6 +194,16 @@ private extension WooShippingHazmatDetailView {
             value: "Select Category",
             comment: "Button to select hazardous material category on the HAZMAT detail view in the shipping label creation flow"
         )
+        static let category = NSLocalizedString(
+            "wooShippingHazmatDetailView.category",
+            value: "Category",
+            comment: "Label for the existing category on the HAZMAT detail view in the shipping label creation flow"
+        )
+        static let save = NSLocalizedString(
+            "wooShippingHazmatDetailView.save",
+            value: "Save",
+            comment: "Button to confirm selection on the HAZMAT detail view in the shipping label creation flow"
+        )
         static let detailLine1 = NSLocalizedString(
             "wooShippingHazmatDetailView.detailLine1",
             value: "Potentially hazardous material includes items such as batteries, dry ice, " +