Show instructions as a subview instead of notice.

Author: selanthiraiyan

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsDetailView.swift

@@ -8,23 +8,28 @@ struct WooShippingSplitShipmentsDetailView: View {
 
     var body: some View {
         NavigationView {
-            ScrollView {
-                VStack(alignment: .leading, spacing: Layout.contentPadding) {
-                    AdaptiveStack(horizontalAlignment: .leading) {
-                        Text(viewModel.itemsCountLabel)
-                            .headlineStyle()
-                        Spacer()
-                        Text(viewModel.itemsDetailLabel)
-                            .foregroundStyle(Color(.textSubtle))
-                    }
+            ZStack(alignment: .bottom) {
+                ScrollView {
+                    VStack(alignment: .leading, spacing: Layout.contentPadding) {
+                        AdaptiveStack(horizontalAlignment: .leading) {
+                            Text(viewModel.itemsCountLabel)
+                                .headlineStyle()
+                            Spacer()
+                            Text(viewModel.itemsDetailLabel)
+                                .foregroundStyle(Color(.textSubtle))
+                        }
 
-                    VStack(spacing: Layout.verticalSpacing) {
-                        ForEach(viewModel.shipmentCardViewModels) { item in
-                            CollapsibleShipmentCard(viewModel: item)
+                        VStack(spacing: Layout.verticalSpacing) {
+                            ForEach(viewModel.shipmentCardViewModels) { item in
+                                CollapsibleShipmentCard(viewModel: item)
+                            }
                         }
                     }
+                    .padding(Layout.contentPadding)
                 }
-                .padding(Layout.contentPadding)
+
+                noticeStack
+                    .padding(Layout.contentPadding)
             }
             .navigationBarTitleDisplayMode(.inline)
             .navigationTitle(Localization.title)
@@ -49,6 +54,51 @@ struct WooShippingSplitShipmentsDetailView: View {
 }
 
 private extension WooShippingSplitShipmentsDetailView {
+    var noticeStack: some View {
+        VStack(spacing: Layout.contentPadding) {
+            if let message = viewModel.instructions {
+                InstructionsSnackbar(message: message) {
+                    viewModel.dismissInstructions()
+                }
+        }
+    }
+}
+
+private struct InstructionsSnackbar: View {
+    let message: String
+    let actionHandler: () -> Void
+
+    var body: some View {
+        HStack(alignment: .top, spacing: Layout.hSpacing) {
+            BoldableTextView(message)
+                .foregroundStyle(Color(.textInverted))
+
+            Spacer()
+
+            Button {
+                actionHandler()
+            } label: {
+                Image(systemName: "xmark")
+                    .foregroundStyle(Color(.withColorStudio(.gray)))
+            }
+        }
+        .padding(WooShippingSplitShipmentsDetailView.Layout.contentPadding)
+        .background {
+            RoundedRectangle(cornerRadius: WooShippingSplitShipmentsDetailView.Layout.cornerRadius)
+                .fill(Color(.text))
+                .shadow(color: Color(.text).opacity(Layout.shadowColorOpacity),
+                        radius: WooShippingSplitShipmentsDetailView.Layout.shadowRadius,
+                        y: WooShippingSplitShipmentsDetailView.Layout.shadowYOffset)
+        }
+    }
+
+    private enum Layout {
+        static let hSpacing: CGFloat = 8
+        static let shadowColorOpacity: CGFloat = 0.16
+    }
+}
+
+fileprivate extension WooShippingSplitShipmentsDetailView {
     enum Layout {
         static let contentPadding: CGFloat = 16
         static let borderCornerRadius: CGFloat = 8

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsViewModel.swift

@@ -28,7 +28,9 @@ final class WooShippingSplitShipmentsViewModel: ObservableObject {
 
     let shipmentCardViewModels: [CollapsibleShipmentCardViewModel]
 
-    @Published var instructionsNotice: Notice?
+    @Published private(set) var instructions: String?
+    private var dismissedInstructions: Bool = false
+
 
     init(order: Order,
          config: WooShippingConfig,
@@ -82,6 +84,11 @@ final class WooShippingSplitShipmentsViewModel: ObservableObject {
             $0.selectAll()
         }
     }
+
+    func dismissInstructions() {
+        instructions = nil
+        dismissedInstructions = true
+    }
 }
 
 private extension WooShippingSplitShipmentsViewModel {
@@ -94,12 +101,8 @@ private extension WooShippingSplitShipmentsViewModel {
     }
 
     func showInstructionsNotice() {
-        if hasSelectedAnItem() == false {
-            instructionsNotice = Notice(message: Localization.SelectionInstructionsNotice.message,
-                                        feedbackType: .success,
-                                        actionTitle: Localization.SelectionInstructionsNotice.dismiss) { [weak self] in
-                self?.instructionsNotice = nil
-            }
+        if !dismissedInstructions {
+            instructions = Localization.SelectionInstructionsNotice.message
         }
     }