Replace receipt page header with POSPageHeaderView with adjusted layout.

Author: jaclync

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

@@ -18,61 +18,51 @@ struct POSSendReceiptView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: conditionalPadding(8)) {
-            HStack {
-                Button(action: {
-                    withAnimation {
-                        isShowingSendReceiptView = false
-                        isTextFieldFocused = false
-                    }
-                }, label: {
-                    HStack {
-                        Image(systemName: "chevron.backward")
-                        Text(Localization.emailReceiptNavigationText)
+            POSPageHeaderView(title: Localization.emailReceiptNavigationText,
+                              backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled,
+                                                             action: {
+                withAnimation {
+                    isShowingSendReceiptView = false
+                    isTextFieldFocused = false
+                }
+            }))
+
+            VStack(alignment: .center, spacing: conditionalPadding(8)) {
+                TextField(Localization.textfieldPlaceholder, text: $textFieldInput)
+                    .dynamicTypeSize(...DynamicTypeSize.accessibility1)
+                    .keyboardType(.emailAddress)
+                    .textInputAutocapitalization(.never)
+                    .autocorrectionDisabled()
+                    .multilineTextAlignment(.center)
+                    .font(POSFontStyle.posBodyXLarge)
+                    .focused()
+                    .focused($isTextFieldFocused)
+                    .padding()
+                    .onSubmit {
+                        sendReceipt()
                     }
-                    .font(.posHeading)
-                    .foregroundColor(.posOnSurface)
-                    .dynamicTypeSize(...DynamicTypeSize.accessibility3)
-                    .accessibilityAddTraits(.isHeader)
-                })
-                Spacer()
-            }
-            .buttonStyle(.plain)
-            .disabled(isLoading)
 
-            TextField(Localization.textfieldPlaceholder, text: $textFieldInput)
-                .dynamicTypeSize(...DynamicTypeSize.accessibility1)
-                .keyboardType(.emailAddress)
-                .textInputAutocapitalization(.never)
-                .autocorrectionDisabled()
-                .multilineTextAlignment(.center)
-                .font(POSFontStyle.posBodyXLarge)
-                .focused()
-                .focused($isTextFieldFocused)
-                .padding()
-                .onSubmit {
-                    sendReceipt()
+                if let errorMessage = errorMessage {
+                    Text(errorMessage)
+                        .font(POSFontStyle.posBodyLargeRegular())
+                        .foregroundColor(.red)
+                        .padding(.bottom, Constants.errorMessagePadding)
                 }
 
-            if let errorMessage = errorMessage {
-                Text(errorMessage)
-                    .font(POSFontStyle.posBodyLargeRegular())
-                    .foregroundColor(.red)
-                    .padding(.bottom, Constants.errorMessagePadding)
-            }
-
-            Button(action: {
-                sendReceipt()
-            }, label: {
-                Text(Localization.buttonTitle)
-            })
-            .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
-            .dynamicTypeSize(...DynamicTypeSize.accessibility3)
-            .frame(maxWidth: .infinity)
-            .disabled(isLoading)
+                Button(action: {
+                    sendReceipt()
+                }, label: {
+                    Text(Localization.buttonTitle)
+                })
+                .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
+                .dynamicTypeSize(...DynamicTypeSize.accessibility3)
+                .frame(maxWidth: .infinity)
+                .disabled(isLoading)
 
-            Spacer()
+                Spacer()
+            }
+            .padding([.horizontal, .bottom])
         }
-        .padding([.horizontal, .bottom])
         .animation(.easeInOut, value: errorMessage)
         .onChange(of: textFieldInput) { _ in
             errorMessage = nil