Store creation M2: integrate with mock IAP to test the entire flow

Experiments/Experiments/DefaultFeatureFlagService.swift

@@ -37,6 +37,8 @@ public struct DefaultFeatureFlagService: FeatureFlagService {
             return true
         case .storeCreationM2:
             return buildConfig == .localDeveloper || buildConfig == .alpha
+        case .storeCreationM2WithInAppPurchasesEnabled:
+            return false
         case .justInTimeMessagesOnDashboard:
             return true
         case .systemStatusReportInSupportRequest:

Experiments/Experiments/FeatureFlag.swift

@@ -78,6 +78,11 @@ public enum FeatureFlag: Int {
     ///
     case storeCreationM2
 
+    /// Whether in-app purchases are enabled for store creation milestone 2 behind `storeCreationM2` feature flag.
+    /// If disabled, mock in-app purchases are provided by `MockInAppPurchases`.
+    ///
+    case storeCreationM2WithInAppPurchasesEnabled
+
     /// Just In Time Messages on Dashboard
     ///
     case justInTimeMessagesOnDashboard

WooCommerce/Classes/Authentication/Epilogue/StorePickerViewModel.swift

@@ -174,6 +174,15 @@ extension StorePickerViewModel {
             return possibleURLs.contains(siteURL)
         })
     }
+
+    /// Returns the site that matches the given site ID.
+    ///
+    func site(thatMatchesSiteID siteID: Int64) -> Site? {
+        guard resultsController.numberOfObjects > 0 else {
+            return nil
+        }
+        return resultsController.fetchedObjects.first(where: { $0.siteID == siteID })
+    }
 }
 
 private extension StorePickerViewModel {

WooCommerce/Classes/Authentication/Store Creation/Plan/MockInAppPurchases.swift

@@ -0,0 +1,66 @@
+import Foundation
+import StoreKit
+
+#if DEBUG
+
+/// Only used during store creation development before IAP server side is ready.
+struct MockInAppPurchases {
+    struct Plan: WPComPlanProduct {
+        let displayName: String
+        let description: String
+        let id: String
+        let displayPrice: String
+    }
+
+    private let fetchProductsDuration: UInt64
+    private let products: [WPComPlanProduct]
+    private let userIsEntitledToProduct: Bool
+
+    /// - Parameter fetchProductsDuration: How long to wait until the mock plan is returned, in nanoseconds.
+    /// - Parameter products: WPCOM products to return for purchase.
+    /// - Parameter userIsEntitledToProduct: Whether the user is entitled to the matched IAP product.
+    init(fetchProductsDuration: UInt64 = 1_000_000_000,
+         products: [WPComPlanProduct] = Defaults.products,
+         userIsEntitledToProduct: Bool = false) {
+        self.fetchProductsDuration = fetchProductsDuration
+        self.products = products
+        self.userIsEntitledToProduct = userIsEntitledToProduct
+    }
+}
+
+extension MockInAppPurchases: InAppPurchasesForWPComPlansProtocol {
+    func fetchProducts() async throws -> [WPComPlanProduct] {
+        try await Task.sleep(nanoseconds: fetchProductsDuration)
+        return products
+    }
+
+    func userIsEntitledToProduct(with id: String) async throws -> Bool {
+        userIsEntitledToProduct
+    }
+
+    func purchaseProduct(with id: String, for remoteSiteId: Int64) async throws -> InAppPurchaseResult {
+        // Returns `.pending` in case of success because `StoreKit.Transaction` cannot be easily mocked.
+        .pending
+    }
+
+    func retryWPComSyncForPurchasedProduct(with id: String) async throws {
+        // no-op
+    }
+
+    func inAppPurchasesAreSupported() async -> Bool {
+        true
+    }
+}
+
+private extension MockInAppPurchases {
+    enum Defaults {
+        static let products: [WPComPlanProduct] = [
+            Plan(displayName: "Debug Monthly",
+                 description: "1 Month of Debug Woo",
+                 id: "debug.woocommerce.ecommerce.monthly",
+                 displayPrice: "$69.99")
+        ]
+    }
+}
+
+#endif

WooCommerce/Classes/Authentication/Store Creation/Plan/StoreCreationPlanView.swift

@@ -2,18 +2,18 @@ import SwiftUI
 
 /// Hosting controller that wraps the `StoreCreationPlanView`.
 final class StoreCreationPlanHostingController: UIHostingController<StoreCreationPlanView> {
-    private let onPurchase: () -> Void
+    private let onPurchase: () async -> Void
     private let onClose: () -> Void
 
     init(viewModel: StoreCreationPlanViewModel,
-         onPurchase: @escaping () -> Void,
+         onPurchase: @escaping () async -> Void,
          onClose: @escaping () -> Void) {
         self.onPurchase = onPurchase
         self.onClose = onClose
         super.init(rootView: StoreCreationPlanView(viewModel: viewModel))
 
         rootView.onPurchase = { [weak self] in
-            self?.onPurchase()
+            await self?.onPurchase()
         }
     }
 
@@ -32,6 +32,12 @@ final class StoreCreationPlanHostingController: UIHostingController<StoreCreatio
     func configureNavigationBarAppearance() {
         addCloseNavigationBarButton(target: self, action: #selector(closeButtonTapped))
 
+        // If large title is only disabled with `navigationBarTitleDisplayMode(.inline)` in the SwiftUI view,
+        // navigating from a screen with large title results in a gap below the navigation bar briefly.
+        // Also disabling large title in the hosting controller smoothens the transition.
+        navigationItem.largeTitleDisplayMode = .never
+        navigationController?.navigationBar.prefersLargeTitles = false
+
         let appearance = UINavigationBarAppearance()
         appearance.configureWithTransparentBackground()
         appearance.backgroundColor = .withColorStudio(.wooCommercePurple, shade: .shade90)
@@ -49,10 +55,12 @@ final class StoreCreationPlanHostingController: UIHostingController<StoreCreatio
 /// Displays the WPCOM eCommerce plan for purchase during the store creation flow.
 struct StoreCreationPlanView: View {
     /// Set in the hosting controller.
-    var onPurchase: (() -> Void) = {}
+    var onPurchase: (() async -> Void) = {}
 
     let viewModel: StoreCreationPlanViewModel
 
+    @State private var isPurchaseInProgress: Bool = false
+
     var body: some View {
         VStack(alignment: .leading, spacing: 0) {
             ScrollView {
@@ -126,9 +134,13 @@ struct StoreCreationPlanView: View {
 
                 // Continue button.
                 Button(String(format: Localization.continueButtonTitleFormat, viewModel.plan.displayPrice)) {
-                    onPurchase()
+                    Task { @MainActor in
+                        isPurchaseInProgress = true
+                        await onPurchase()
+                        isPurchaseInProgress = false
+                    }
                 }
-                .buttonStyle(PrimaryButtonStyle())
+                .buttonStyle(PrimaryLoadingButtonStyle(isLoading: isPurchaseInProgress))
                 .padding(Layout.defaultButtonPadding)
 
                 // Refund information.
@@ -144,6 +156,10 @@ struct StoreCreationPlanView: View {
         .background(Color(.withColorStudio(.wooCommercePurple, shade: .shade90)))
         // This screen is using the dark theme for both light and dark modes.
         .environment(\.colorScheme, .dark)
+        // Disables large title to avoid a large gap below the navigation bar.
+        .navigationBarTitleDisplayMode(.inline)
+        // Hides the back button and shows a close button in the hosting controller instead.
+        .navigationBarBackButtonHidden(true)
     }
 }
 

WooCommerce/Classes/Authentication/Store Creation/Store name/StoreNameForm.swift

@@ -104,6 +104,8 @@ struct StoreNameForm: View {
             .buttonStyle(PrimaryButtonStyle())
             .disabled(name.isEmpty)
         }
+        // Disables large title to avoid a large gap below the navigation bar.
+        .navigationBarTitleDisplayMode(.inline)
     }
 }