Merge PointOfSaleLoading view and POSCatalogLoadingView

Author: staskus

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

@@ -1,15 +1,12 @@
 import SwiftUI
 
-struct POSLoadingAnimation {
-    let namespace: Namespace.ID
-    let progressTransitionId: String = "pos_card_present_payment_payment_alert_icon_matched_geometry_id"
-}
-
 struct PointOfSaleLoadingView: View {
-    private let animation: POSLoadingAnimation
+    private let isCatalogSyncing: Bool
+    private let onExit: (() -> Void)?
 
-    init(animation: POSLoadingAnimation) {
-        self.animation = animation
+    init(isCatalogSyncing: Bool = false, onExit: (() -> Void)? = nil) {
+        self.isCatalogSyncing = isCatalogSyncing
+        self.onExit = onExit
     }
 
     var body: some View {
@@ -19,8 +16,29 @@ struct PointOfSaleLoadingView: View {
                 Spacer()
                 ProgressView()
                     .progressViewStyle(POSProgressViewStyle())
-                    .matchedGeometryEffect(id: animation.progressTransitionId, in: animation.namespace, properties: .position)
-                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()
@@ -30,6 +48,31 @@ struct PointOfSaleLoadingView: View {
 }
 
 #Preview {
-    @Previewable @Namespace var namespace
-    PointOfSaleLoadingView(animation: .init(namespace: namespace))
+    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/POSCatalogLoadingView.swift

@@ -14,8 +14,6 @@ struct PointOfSaleDashboardView: View {
     @State private var showSettings: Bool = false
     @State private var waitingTimeTracker: WaitingTimeTracker?
 
-    let animation: POSLoadingAnimation
-
     @State private var floatingSize: CGSize = .zero
 
     private var viewStateCoordinator: PointOfSaleViewStateCoordinator {
@@ -62,17 +60,12 @@ struct PointOfSaleDashboardView: View {
         ZStack(alignment: .bottomLeading) {
             switch viewState {
             case .loading(let isCatalogSyncing):
-                if isCatalogSyncing {
-                    POSCatalogLoadingView(animation: animation) {
-                        dismiss()
-                    }
-                        .transition(.opacity)
-                        .ignoresSafeArea()
-                } else {
-                    PointOfSaleLoadingView(animation: animation)
-                        .transition(.opacity)
-                        .ignoresSafeArea()
-                }
+                PointOfSaleLoadingView(
+                    isCatalogSyncing: isCatalogSyncing,
+                    onExit: { dismiss() }
+                )
+                    .transition(.opacity)
+                    .ignoresSafeArea()
             case .ineligible(let reason):
                 POSIneligibleView(reason: reason, onRefresh: {
                     try await posModel.entryPointController.refreshEligibility(reason: reason)
@@ -284,21 +277,19 @@ private extension PointOfSaleDashboardView {
 #if DEBUG
 
 #Preview("Container loading state") {
-    @Previewable @Namespace var namespace
     return NavigationStack {
-        PointOfSaleDashboardView(animation: .init(namespace: namespace))
+        PointOfSaleDashboardView()
             .environment(POSPreviewHelpers.makePreviewAggregateModel())
             .environmentObject(POSModalManager())
     }
 }
 
 #Preview("Content loading state") {
-    @Previewable @Namespace var namespace
     let itemsController = PointOfSalePreviewItemsController()
     itemsController.itemsViewState = .init(containerState: .content, itemsStack: .init(root: .loading([]), itemStates: [:]))
     let posModel = POSPreviewHelpers.makePreviewAggregateModel(itemsController: itemsController)
     return NavigationStack {
-        PointOfSaleDashboardView(animation: .init(namespace: namespace))
+        PointOfSaleDashboardView()
             .environment(posModel)
             .environmentObject(POSModalManager())
     }

Modules/Sources/PointOfSale/Presentation/PointOfSaleDashboardView.swift

@@ -26,9 +26,6 @@ public struct PointOfSaleEntryPointView: View {
     @State private var posEntryPointController: POSEntryPointController
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
 
-    @Namespace private var namespace
-    private var animation: POSLoadingAnimation { .init(namespace: namespace) }
-
     private let onPointOfSaleModeActiveStateChange: ((Bool) -> Void)
     private let itemsController: PointOfSaleItemsControllerProtocol
     private let purchasableItemsSearchController: PointOfSaleSearchingItemsControllerProtocol
@@ -140,10 +137,10 @@ public struct PointOfSaleEntryPointView: View {
     public var body: some View {
         Group {
             if let posModel {
-                PointOfSaleDashboardView(animation: animation)
+                PointOfSaleDashboardView()
                     .environment(posModel)
             } else {
-                PointOfSaleLoadingView(animation: animation)
+                PointOfSaleLoadingView()
             }
         }
         .task {