Add print action to print button with a loading indicator

woocommerce · Nov 27, 2024 · c0cc5b3 · c0cc5b3
1 parent bb3e847
commit c0cc5b3
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/...ipping Create Shipping Labels/WooShipping Post-Purchase/WooShippingPostPurchaseView.swift b/...ipping Create Shipping Labels/WooShipping Post-Purchase/WooShippingPostPurchaseView.swift
@@ -3,6 +3,8 @@ import SwiftUI
 struct WooShippingPostPurchaseView: View {
     @ObservedObject private(set) var viewModel: WooShippingPostPurchaseViewModel
 
+    @State private var isPrintingLabel = false
+
     var body: some View {
         VStack(alignment: .leading, spacing: 8) {
             Text(Localization.readyToPrint)
@@ -35,12 +37,16 @@ struct WooShippingPostPurchaseView: View {
                     .roundedBorder(cornerRadius: 8, lineColor: Color(.separator), lineWidth: 1)
                 }
                 Button {
-                    // TODO: Request label from remote and open print dialog
+                    isPrintingLabel = true
+                    Task { @MainActor in
+                        await viewModel.printLabel()
+                        isPrintingLabel = false
+                    }
                 } label: {
                     Text(Localization.printButton)
                         .bold()
                 }
-                .buttonStyle(HighlightButtonStyle(background: Layout.panelHighlight, backgroundPressed: Layout.buttonPressed))
+                .buttonStyle(HighlightLoadingButtonStyle(isLoading: isPrintingLabel, background: Layout.panelHighlight, backgroundPressed: Layout.buttonPressed))
                 NavigationLink {
                     ShippingLabelPrintingInstructionsView()
                         .navigationTitle(Localization.infoTitle)

diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/ButtonStyles.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/ButtonStyles.swift
@@ -195,8 +195,46 @@ struct HighlightButtonStyle: ButtonStyle {
     /// Background color when the button is pressed.
     let backgroundPressed: Color
 
+    /// Defines if the content should be hidden.
+    /// Useful for when we want to show an overlay on top of the bottom without hiding its decoration. Like showing a progress view.
+    ///
+    private(set) var hideContent = false
+
     func makeBody(configuration: Configuration) -> some View {
-        HighlightButton(configuration: configuration, background: background, backgroundPressed: backgroundPressed)
+        HighlightButton(configuration: configuration, background: background, backgroundPressed: backgroundPressed, hideContent: hideContent)
+    }
+}
+
+/// Adds a highlight button style while showing a progress view on top of the button when required.
+///
+struct HighlightLoadingButtonStyle: PrimitiveButtonStyle {
+    /// Set to `true` to show a progress view within the button.
+    var isLoading: Bool
+
+    /// Background color for the button.
+    let background: Color
+
+    /// Background color when the button is pressed.
+    let backgroundPressed: Color
+
+    /// Returns a `ProgressView` if the view is loading. Return nil otherwise
+    ///
+    private var progressViewOverlay: ProgressView<EmptyView, EmptyView>? {
+        isLoading ? ProgressView() : nil
+    }
+
+    func makeBody(configuration: Configuration) -> some View {
+        return Button(configuration)
+            .buttonStyle(HighlightButtonStyle(background: background, backgroundPressed: backgroundPressed, hideContent: isLoading))
+            .disabled(isLoading)
+            .overlay(progressViewOverlay.tint(Color(.primaryButtonTitle)))
+    }
+
+    /// Only dispatch events while the view is not loading.
+    ///
+    private func dispatchTrigger(_ configuration: Configuration) {
+        guard !isLoading else { return }
+        configuration.trigger()
     }
 }
 
@@ -481,8 +519,14 @@ private struct HighlightButton: View {
     /// Background color when the button is pressed.
     let backgroundPressed: Color
 
+    /// Defines if the content should be hidden.
+    /// Useful for when we want to show an overlay on top of the bottom without hiding its decoration. Like showing a progress view.
+    ///
+    private(set) var hideContent = false
+
     var body: some View {
         BaseButton(configuration: configuration)
+            .opacity(contentOpacity)
             .foregroundColor(Color(.primaryButtonTitle))
             .font(.headline)
             .background(
@@ -498,6 +542,10 @@ private struct HighlightButton: View {
             return background
         }
     }
+
+    var contentOpacity: Double {
+        hideContent ? 0.0 : 1.0
+    }
 }
 
 private enum Style {