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 index 0ba1db3465b..c9235aa8ea2 100644 --- 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 @@ -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, " +