Merge pull request #7451 from woocommerce/issue/7362-run-ipp-onboarding-background

[Mobile Payments] Run onboarding check on the IPP hub screen asynchronously

Author: toupper

WooCommerce/Classes/Analytics/WooAnalyticsStat.swift

@@ -140,8 +140,6 @@ public enum WooAnalyticsStat: String {
     case settingsTapped = "main_menu_settings_tapped"
     case settingsSelectedStoreTapped = "settings_selected_site_tapped"
     case settingsContactSupportTapped = "main_menu_contact_support_tapped"
-    case settingsCardReadersTapped = "settings_card_readers_tapped"
-    case settingsCardPresentSelectedPaymentGatewayTapped = "settings_card_present_select_payment_gateway_tapped"
 
     case settingsBetaFeaturesButtonTapped = "settings_beta_features_button_tapped"
     case settingsBetaFeaturesProductsToggled = "settings_beta_features_products_toggled"
@@ -651,6 +649,14 @@ public enum WooAnalyticsStat: String {
     case loginWooCommerceSetupButtonTapped = "login_woocommerce_setup_button_tapped"
     case loginWooCommerceSetupDismissed = "login_woocommerce_setup_dismissed"
     case loginWooCommerceSetupCompleted = "login_woocommerce_setup_completed"
+
+    // MARK: Payments Menu
+    case paymentsMenuCollectPaymentTapped = "payments_hub_collect_payment_tapped"
+    case paymentsMenuOnboardingErrorTapped = "payments_hub_onboarding_error_tapped"
+    case paymentsMenuOrderCardReaderTapped = "payments_hub_order_card_reader_tapped"
+    case paymentsMenuCardReadersManualsTapped = "payments_hub_card_readers_manuals_tapped"
+    case paymentsMenuManageCardReadersTapped = "payments_hub_manage_card_readers_tapped"
+    case paymentsMenuPaymentProviderTapped = "settings_card_present_select_payment_gateway_tapped"
 }
 
 public extension WooAnalyticsStat {

WooCommerce/Classes/Tools/Notices/PermanentNotice/PermanentNoticePresenter.swift

@@ -0,0 +1,92 @@
+import Foundation
+import UIKit
+import SwiftUI
+
+/// This struct encapsulates the content to displayed in a Permanent Notice
+///
+struct PermanentNotice {
+    let message: String
+    let callToActionTitle: String
+    let callToActionHandler: () -> Void
+}
+
+/// Presents a banner permanently, that is, will remain until it is called to dismiss, unlike `DefaultNoticePresenter`, which dismiss the notice after a delay.
+/// The design also differs with the latter to represent a more permanent air.
+///
+final class PermanentNoticePresenter {
+    private var hostingController: UIHostingController<PermanentNoticeView>?
+
+    /// Presents the given notice into the passed view controller with an animation
+    ///
+    func presentNotice(notice: PermanentNotice, from viewController: UIViewController) {
+        let permanentNoticeView = PermanentNoticeView(notice: notice)
+        let newHostingController = ConstraintsUpdatingHostingController(rootView: permanentNoticeView)
+
+        guard let hostingView = newHostingController.view else {
+            return
+        }
+
+        viewController.addChild(newHostingController)
+        viewController.view.addSubview(hostingView)
+
+        setupConstraints(in: viewController, hostingView: hostingView)
+        animatePresentation(of: newHostingController, in: viewController)
+
+        self.hostingController = newHostingController
+    }
+
+    /// Dismiss the permanent notice presented by calling `presentNotice`. If there is no one presented this method does nothing.
+    ///
+    func dismiss() {
+        animateDismiss()
+    }
+}
+
+private extension PermanentNoticePresenter {
+    func setupConstraints(in viewController: UIViewController, hostingView: UIView) {
+        hostingView.translatesAutoresizingMaskIntoConstraints = false
+
+        NSLayoutConstraint.activate([
+            viewController.view.leadingAnchor.constraint(equalTo: hostingView.leadingAnchor, constant: 0),
+            viewController.view.trailingAnchor.constraint(equalTo: hostingView.trailingAnchor, constant: 0),
+            viewController.view.bottomAnchor.constraint(equalTo: hostingView.bottomAnchor, constant: 0),
+            ])
+    }
+
+    func animatePresentation(of hostingController: UIViewController, in viewController: UIViewController) {
+        guard let hostingView = hostingController.view else {
+            return
+        }
+
+        hostingView.alpha = 0
+
+        UIView.animate(withDuration: Animations.appearanceDuration,
+                       delay: 0,
+                       options: .transitionFlipFromLeft, animations: {
+            hostingView.alpha = 1
+            }) { _ in
+                hostingController.didMove(toParent: viewController)
+            }
+    }
+
+    func animateDismiss() {
+        guard let hostingController = hostingController else {
+            return
+        }
+
+        UIView.animate(withDuration: Animations.appearanceDuration,
+                       delay: 0,
+                       options: .transitionFlipFromLeft, animations: {
+            hostingController.view.alpha = 0
+            }) { _ in
+                hostingController.willMove(toParent: nil)
+                hostingController.view.removeFromSuperview()
+            }
+    }
+}
+
+private extension PermanentNoticePresenter {
+    private enum Animations {
+        static let appearanceDuration: TimeInterval = 0.5
+    }
+}

WooCommerce/Classes/Tools/Notices/PermanentNotice/PermanentNoticeView.swift

@@ -0,0 +1,49 @@
+import Foundation
+import SwiftUI
+
+/// Renders a permanent notice with a separator line on top
+///
+struct PermanentNoticeView: View {
+    let notice: PermanentNotice
+
+    var body: some View {
+        PermanentNoticeContentView(notice: notice)
+            .background(Color(.listForeground))
+            .overlay(Rectangle()
+                .frame(width: nil, height: 0.5, alignment: .top)
+                .foregroundColor(Color(UIColor.systemColor(.separator))), alignment: .top)
+    }
+}
+
+private struct PermanentNoticeContentView: View {
+    let notice: PermanentNotice
+
+    var body: some View {
+        HStack(alignment: .top, spacing: Layout.hStackSpacing) {
+            Image(uiImage: .infoOutlineImage)
+                .foregroundColor(Color(.gray(.shade40)))
+
+            VStack(alignment: .leading, spacing: Layout.vStackSpacing) {
+                Text(notice.message)
+                    .bodyStyle()
+                Button(action: notice.callToActionHandler, label: {
+                    Text(notice.callToActionTitle)
+                        .underline()
+                        .font(.body)
+                        .foregroundColor(Color(.accent))
+                })
+            }.padding(.top, Layout.vStackTopPadding)
+        }
+        .frame(maxWidth: .infinity, alignment: .topLeading)
+        .padding(Layout.hStackPadding)
+    }
+}
+
+private extension PermanentNoticeContentView {
+    enum Layout {
+        static let hStackSpacing: CGFloat = 15
+        static let hStackPadding: CGFloat = 10
+        static let vStackSpacing: CGFloat = 10
+        static let vStackTopPadding: CGFloat = 2
+    }
+}