Show loading and success button state in POSSendReceiptView

Author: staskus

WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift

@@ -22,7 +22,7 @@ struct POSFilledButtonStyle: ButtonStyle {
         self.size = size
         self.state = isLoading ? .loading : .idle
     }
-    
+
     init(size: POSButtonSize, state: POSButtonState) {
         self.size = size
         self.state = state
@@ -212,9 +212,9 @@ struct POSButtonStyle_Previews: View {
                 LoadingPreviewSection(title: "Loading Buttons - Normal", size: .normal)
 
                 LoadingPreviewSection(title: "Loading Buttons - Extra Small", size: .extraSmall)
-                
+
                 LoadingStatePreviewSection(title: "Loading State Buttons - Normal", size: .normal)
-                
+
                 LoadingStatePreviewSection(title: "Loading State Buttons - Extra Small", size: .extraSmall)
 
                 // Example with long text

WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift

@@ -5,7 +5,7 @@ import class WordPressShared.EmailFormatValidator
 
 struct POSSendReceiptView: View {
     @State private var textFieldInput: String = ""
-    @State private var isLoading: Bool = false
+    @State private var buttonState: POSButtonState = .idle
     @State private var errorMessage: String?
     @FocusState private var isTextFieldFocused: Bool
 
@@ -29,7 +29,7 @@ struct POSSendReceiptView: View {
         ScrollView {
             VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) {
                 POSPageHeaderView(title: Localization.emailReceiptNavigationText,
-                                  backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled,
+                                  backButtonConfiguration: .init(state: buttonState != .idle ? .disabled: .enabled,
                                                                  action: {
                     withAnimation {
                         isShowingSendReceiptView = false
@@ -74,10 +74,10 @@ struct POSSendReceiptView: View {
                     .measureFrame {
                         buttonFrame = $0
                     }
-                    .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
+                    .buttonStyle(POSFilledButtonStyle(size: .normal, state: buttonState))
                     .dynamicTypeSize(...DynamicTypeSize.accessibility3)
                     .frame(maxWidth: .infinity)
-                    .disabled(isLoading)
+                    .disabled(buttonState != .idle)
                 }
                 .padding([.horizontal])
                 .padding(.bottom, keyboardFrame.height)
@@ -102,18 +102,21 @@ struct POSSendReceiptView: View {
                 errorMessage = Localization.emailValidationErrorText
                 return
             }
-            isLoading = true
+            buttonState = .loading
             do {
                 errorMessage = nil
                 try await onSendReceipt(textFieldInput)
+
                 withAnimation {
+                    buttonState = .success
+                } completion: {
                     isShowingSendReceiptView = false
                     isTextFieldFocused = false
                 }
             } catch {
                 errorMessage = Localization.sendReceiptErrorText
+                buttonState = .idle
             }
-            isLoading = false
         }
     }
 }