[Woo POS][Local Catalog] Loading screen for missing catalog when launching POS (#16272)

Author: joshheald

Modules/Sources/PointOfSale/Controllers/PointOfSaleItemsController.swift

@@ -40,7 +40,7 @@ protocol PointOfSaleSearchingItemsControllerProtocol: PointOfSaleItemsController
 
     init(itemProvider: PointOfSaleItemServiceProtocol,
          itemFetchStrategyFactory: PointOfSaleItemFetchStrategyFactoryProtocol,
-         initialState: ItemsViewState = ItemsViewState(containerState: .loading,
+         initialState: ItemsViewState = ItemsViewState(containerState: .loading(),
                                                        itemsStack: ItemsStackState(root: .initial,
                                                                                    itemStates: [:])),
          analyticsProvider: POSAnalyticsProviding) {
@@ -213,7 +213,7 @@ private extension PointOfSaleItemsController {
     func setRootLoadingState() {
         let items = itemsViewState.itemsStack.root.items
 
-        let isInitialState = itemsViewState.containerState == .loading && itemsViewState.itemsStack.root == .initial
+        let isInitialState = itemsViewState.containerState == .loading() && itemsViewState.itemsStack.root == .initial
         if isInitialState {
             // Transition from initial to loading on first load
             itemsViewState.itemsStack.root = .loading([])

Modules/Sources/PointOfSale/Controllers/PointOfSaleObservableItemsController.swift

@@ -45,6 +45,8 @@ final class PointOfSaleObservableItemsController: PointOfSaleItemsControllerProt
             currencySettings: currencySettings
         )
         self.catalogSyncCoordinator = catalogSyncCoordinator
+
+        preloadloadLastFullSyncState()
     }
 
     // periphery:ignore - used by tests
@@ -54,6 +56,8 @@ final class PointOfSaleObservableItemsController: PointOfSaleItemsControllerProt
         self.siteID = siteID
         self.dataSource = dataSource
         self.catalogSyncCoordinator = catalogSyncCoordinator
+
+        preloadloadLastFullSyncState()
     }
 
     func loadItems(base: ItemListBaseItem) async {
@@ -117,13 +121,29 @@ final class PointOfSaleObservableItemsController: PointOfSaleItemsControllerProt
 // MARK: - State Computation
 private extension PointOfSaleObservableItemsController {
     var containerState: ItemsContainerState {
-        // Use .loading during initial load, .content otherwise
+        if isInitialCatalogSync {
+            return .loading(isCatalogSyncing: true)
+        }
+
         if !loadingState.productsLoaded && dataSource.isLoadingProducts {
-            return .loading
+            return .loading()
         }
         return .content
     }
 
+    var isInitialCatalogSync: Bool {
+        guard let syncState = catalogSyncCoordinator.fullSyncStateModel.state[siteID] else {
+            return false
+        }
+
+        switch syncState {
+        case .syncStarted(_, true), .syncNeverDone:
+            return true
+        default:
+            return false
+        }
+    }
+
     var rootState: ItemListState {
         computeItemListState(
             items: dataSource.productItems,
@@ -244,3 +264,12 @@ private extension PointOfSaleObservableItemsController {
         var variationsLoaded = false
     }
 }
+
+private extension PointOfSaleObservableItemsController {
+    func preloadloadLastFullSyncState() {
+        Task { @MainActor in
+            /// Ensure last full sync state is loaded with initial value
+            _ = await catalogSyncCoordinator.loadLastFullSyncState(for: siteID)
+        }
+    }
+}

Modules/Sources/PointOfSale/Models/ItemsContainerState.swift

@@ -1,9 +1,18 @@
 import Foundation
 
 enum ItemsContainerState {
-    case loading
+    case loading(isCatalogSyncing: Bool = false)
     case error(PointOfSaleErrorState)
     case content
+
+    var isCatalogSyncing: Bool {
+        switch self {
+        case .loading(let isCatalogSyncing):
+            return isCatalogSyncing
+        default:
+            return false
+        }
+    }
 }
 
 extension ItemsContainerState: Equatable {}

Modules/Sources/PointOfSale/Models/PointOfSaleAggregateModel.swift

@@ -15,6 +15,7 @@ import enum Yosemite.POSItemType
 import protocol Yosemite.PointOfSaleBarcodeScanServiceProtocol
 import enum Yosemite.PointOfSaleBarcodeScanError
 import protocol Yosemite.POSCatalogSyncCoordinatorProtocol
+import class Yosemite.POSCatalogSyncCoordinator
 
 protocol PointOfSaleAggregateModelProtocol {
     var cart: Cart { get }

Modules/Sources/PointOfSale/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift

@@ -1,14 +1,44 @@
 import SwiftUI
 
 struct PointOfSaleLoadingView: View {
+    private let isCatalogSyncing: Bool
+    private let onExit: (() -> Void)?
+
+    init(isCatalogSyncing: Bool = false, onExit: (() -> Void)? = nil) {
+        self.isCatalogSyncing = isCatalogSyncing
+        self.onExit = onExit
+    }
+
     var body: some View {
         HStack(alignment: .center) {
             Spacer()
             VStack(alignment: .center) {
                 Spacer()
                 ProgressView()
                     .progressViewStyle(POSProgressViewStyle())
-                Spacer()
+
+                if isCatalogSyncing {
+                    Spacer().frame(height: POSSpacing.large * 2)
+                    Text(Localization.syncingTitle)
+                        .font(.posHeadingBold)
+                    Spacer()
+                    VStack(spacing: POSSpacing.medium) {
+                        Button {
+                            onExit?()
+                        } label: {
+                            Text(Localization.exitButtonTitle)
+                                .font(.posBodySmallBold(underline: true))
+                                .foregroundStyle(Color.posOnSurface)
+                        }
+
+                        Text(Localization.exitButtonDescription)
+                            .font(.posCaptionRegular)
+                            .foregroundStyle(Color.posOnSurfaceVariantLowest)
+                    }
+                    .padding(.bottom, POSPadding.large)
+                } else {
+                    Spacer()
+                }
             }
             .multilineTextAlignment(.center)
             Spacer()
@@ -20,3 +50,29 @@ struct PointOfSaleLoadingView: View {
 #Preview {
     PointOfSaleLoadingView()
 }
+
+#Preview("Catalog Syncing") {
+    PointOfSaleLoadingView(isCatalogSyncing: true) {}
+}
+
+private extension PointOfSaleLoadingView {
+    struct Localization {
+        static let syncingTitle = NSLocalizedString(
+            "pointOfSale.catalogLoadingView.title",
+            value: "Syncing catalog",
+            comment: "A title of a full screen view that is displayed while the POS catalog is being synced."
+        )
+
+        static let exitButtonTitle = NSLocalizedString(
+            "pointOfSale.catalogLoadingView.exitButton.title",
+            value: "Exit POS",
+            comment: "A button that exits POS."
+        )
+
+        static let exitButtonDescription = NSLocalizedString(
+            "pointOfSale.catalogLoadingView.exitButton.description",
+            value: "Syncing will continue in the background.",
+            comment: "A description within a full screen loading view for POS catalog."
+        )
+    }
+}

Modules/Sources/PointOfSale/Presentation/CouponRowView.swift

@@ -92,7 +92,7 @@ private extension CouponRowView {
         static let horizontalPadding: CGFloat = POSPadding.medium
         static let horizontalElementSpacing: CGFloat = POSSpacing.medium
         static let cardContentHorizontalPadding: CGFloat = POSPadding.medium
-        static let titleFont: POSFontStyle = .posBodySmallBold
+        static let titleFont: POSFontStyle = .posBodySmallBold()
         static let titleSummarySpacing: CGFloat = POSSpacing.xSmall
         static let summaryFont: POSFontStyle = .posBodySmallRegular()
     }

Modules/Sources/PointOfSale/Presentation/ItemRowView.swift

@@ -131,7 +131,7 @@ private extension ItemRowView {
         static let horizontalElementSpacing: CGFloat = POSSpacing.medium
         static let cardContentHorizontalPadding: CGFloat = POSPadding.medium
         static let itemTitleAndPriceSpacing: CGFloat = POSSpacing.xSmall
-        static let itemTitleFont: POSFontStyle = .posBodySmallBold
+        static let itemTitleFont: POSFontStyle = .posBodySmallBold()
         static let itemSubtitleFont: POSFontStyle = .posBodySmallRegular()
         static let itemPriceFont: POSFontStyle = .posBodySmallRegular()
         static let titleSubtitleLineLimit: Int = 4

Modules/Sources/PointOfSale/Presentation/Orders/POSOrderListView.swift

@@ -234,7 +234,7 @@ private struct POSOrderRowView: View {
     private var orderHeaderRow: some View {
         HStack(alignment: .center) {
             Text(POSOrderListView.Localization.orderTitle(order.number))
-                .font(.posBodySmallBold)
+                .font(.posBodySmallBold())
                 .foregroundStyle(Color.posOnSurface)
                 .fixedSize(horizontal: false, vertical: true)
 

Modules/Sources/PointOfSale/Presentation/PointOfSaleDashboardView.swift

@@ -6,6 +6,7 @@ struct PointOfSaleDashboardView: View {
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
     @Environment(\.posAnalytics) private var analytics
     @Environment(\.posExternalViews) private var externalViews
+    @Environment(\.dismiss) private var dismiss
 
     @State private var showExitPOSModal: Bool = false
     @State private var showSupport: Bool = false
@@ -39,7 +40,7 @@ struct PointOfSaleDashboardView: View {
     // MARK: View State
 
     enum ViewState: Equatable {
-        case loading
+        case loading(isCatalogSyncing: Bool = false)
         case ineligible(reason: POSIneligibleReason)
         case error(PointOfSaleErrorState)
         case content
@@ -58,8 +59,11 @@ struct PointOfSaleDashboardView: View {
         @Bindable var posModel = posModel
         ZStack(alignment: .bottomLeading) {
             switch viewState {
-            case .loading:
-                PointOfSaleLoadingView()
+            case .loading(let isCatalogSyncing):
+                PointOfSaleLoadingView(
+                    isCatalogSyncing: isCatalogSyncing,
+                    onExit: { dismiss() }
+                )
                     .transition(.opacity)
                     .ignoresSafeArea()
             case .ineligible(let reason):
@@ -107,7 +111,7 @@ struct PointOfSaleDashboardView: View {
                       CGSizeMake(floatingSize.width + Constants.floatingControlHorizontalOffset,
                                  floatingSize.height + Constants.floatingControlVerticalOffset))
         .environment(\.posBackgroundAppearance, backgroundAppearance)
-        .animation(.easeInOut, value: viewState == .loading)
+        .animation(.easeInOut, value: viewState == .loading())
         .background(Color.posSurface)
         .navigationBarBackButtonHidden(true)
         .posModal(item: $posModel.cardPresentPaymentOnboardingViewContainer, onDismiss: {

Modules/Sources/PointOfSale/Presentation/Reusable Views/POSConnectivityView.swift

@@ -30,11 +30,11 @@ struct POSConnectivityView: View {
         HStack(spacing: Constants.spacing) {
             Image(systemName: "wifi.exclamationmark")
                 .foregroundColor(Color.posOnSecondaryContainer)
-                .font(.posBodySmallBold)
+                .font(.posBodySmallBold())
 
             Text(Localization.title)
                 .foregroundColor(Color.posOnSecondaryContainer)
-                .font(.posBodySmallBold)
+                .font(.posBodySmallBold())
         }
         .padding(.vertical, Constants.verticalPadding)
         .padding(.horizontal, Constants.horizontalPadding)