[Woo POS][Barcodes] Handle transitions for set up flow states (#15942)

Author: staskus

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift

@@ -4,33 +4,39 @@ import SwiftUI
 struct PointOfSaleBarcodeScannerSetup: View {
     @Binding var isPresented: Bool
     @State private var flowManager: PointOfSaleBarcodeScannerSetupFlowManager
+    @Environment(\.posModalParentSize) var parentSize
 
     init(isPresented: Binding<Bool>) {
         self._isPresented = isPresented
         self.flowManager = PointOfSaleBarcodeScannerSetupFlowManager(isPresented: isPresented)
     }
 
     var body: some View {
-        VStack(spacing: POSSpacing.xxLarge) {
-            VStack {
-                currentContent
-                    .frame(maxWidth: .infinity, maxHeight: .infinity)
-                Spacer()
-            }
-            .scrollVerticallyIfNeeded()
+        AnimatedTransitionContainer(
+            maxWidth: parentSize.width * Constants.parentWidthRatio,
+            maxHeight: parentSize.height * Constants.maxParentHeightRatio,
+            id: flowManager.currentStepKey
+        ) {
+            VStack(spacing: POSSpacing.xxLarge) {
+                ScrollView(showsIndicators: false) {
+                    HStack {
+                        Spacer()
+                        currentContent
+                        Spacer()
+                    }
+                }
+                .scrollBounceBehavior(.basedOnSize, axes: [.vertical])
 
-            // Bottom buttons
-            if flowManager.buttonConfiguration.primaryButton != nil || flowManager.buttonConfiguration.secondaryButton != nil {
-                PointOfSaleFlowButtonsView(configuration: flowManager.buttonConfiguration)
+                // Bottom buttons
+                if flowManager.buttonConfiguration.primaryButton != nil || flowManager.buttonConfiguration.secondaryButton != nil {
+                    PointOfSaleFlowButtonsView(configuration: flowManager.buttonConfiguration)
+                }
             }
-        }
-        .posModalCloseButton(action: {
-            isPresented = false
-        })
-        .padding(POSPadding.xxLarge)
-        .background(Color.posSurfaceBright)
-        .containerRelativeFrame([.horizontal, .vertical]) { length, _ in
-            max(length * 0.75, Constants.modalFrameMaxSmallDimension)
+            .posModalCloseButton(action: {
+                isPresented = false
+            })
+            .padding(POSPadding.xxLarge)
+            .background(Color.posSurfaceBright)
         }
         .onAppear {
             ServiceLocator.analytics.track(.pointOfSaleBarcodeScannerSetupFlowShown)
@@ -80,7 +86,8 @@ struct PointOfSaleBarcodeScannerSetup: View {
 
 // MARK: - Constants
 private enum Constants {
-    static var modalFrameMaxSmallDimension: CGFloat { 616 }
+    static var maxParentHeightRatio: CGFloat { 0.9 }
+    static var parentWidthRatio: CGFloat { 0.75 }
 }
 
 // MARK: - Private Localization Extension
@@ -114,3 +121,99 @@ private extension PointOfSaleBarcodeScannerSetup {
 #Preview {
     PointOfSaleBarcodeScannerSetup(isPresented: .constant(true))
 }
+
+/// A container view that animates changes in its child content with a fade-out and fade-in transition,
+/// while also smoothly animating changes in height.
+///
+/// - On first appear: content shows instantly (no fade).
+/// - On content change: fades out old content, replaces it, then fades in new content.
+/// - Handles height changes with a spring animation.
+///
+@available(iOS 17.0, *)
+private struct AnimatedTransitionContainer<Content: View, ID: Equatable>: View {
+    let maxWidth: CGFloat
+    let maxHeight: CGFloat
+    let contentID: ID
+    let contentBuilder: () -> Content
+
+    @State private var visibleContent: Content
+    @State private var previousID: ID
+    @State private var animatedHeight: CGFloat = 0
+    @State private var isVisible: Bool = true
+    @State private var hasAppeared: Bool = false
+
+    private let animationDuration: CGFloat = 0.3
+
+    init(
+        maxWidth: CGFloat,
+        maxHeight: CGFloat,
+        id: ID,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.maxWidth = maxWidth
+        self.maxHeight = maxHeight
+        self.contentID = id
+        self.contentBuilder = content
+        self._visibleContent = State(initialValue: content())
+        self._previousID = State(initialValue: id)
+    }
+
+    var body: some View {
+        visibleContent
+            .opacity(isVisible ? 1 : 0)
+            // First layout pass: constrain content to let scrollView in content to configure itself
+            .frame(width: maxWidth)
+            .frame(maxHeight: maxHeight)
+            .fixedSize(horizontal: false, vertical: true)
+            // Measure the actual height after ScrollView has decided if it needs to scroll
+            .background(
+                GeometryReader { proxy in
+                    Color.clear
+                        .onAppear {
+                            updateSize(to: proxy.size.height)
+                        }
+                        .onChange(of: proxy.size) { newSize in
+                            updateSize(to: newSize.height)
+                        }
+                }
+            )
+            // Second layout pass: create animated viewport using measured height
+            .frame(width: maxWidth)
+            .frame(height: animatedHeight)
+            .clipped()
+            .onAppear {
+                hasAppeared = true
+            }
+            .onChange(of: contentID) { newID in
+                guard newID != previousID else { return }
+
+                if hasAppeared {
+                    withAnimation(.easeInOut(duration: animationDuration / 2)) {
+                        isVisible = false
+                    }
+
+                    DispatchQueue.main.asyncAfter(deadline: .now() + animationDuration / 2) {
+                        visibleContent = contentBuilder()
+                        previousID = newID
+
+                        withAnimation(.easeInOut(duration: animationDuration)) {
+                            isVisible = true
+                        }
+                    }
+                } else {
+                    // First load, no animation
+                    visibleContent = contentBuilder()
+                    previousID = newID
+                    isVisible = true
+                }
+            }
+    }
+
+    private func updateSize(to newHeight: CGFloat) {
+        guard newHeight > 0 else { return }
+
+        withAnimation(.spring(duration: hasAppeared ? animationDuration : 0)) {
+            animatedHeight = min(newHeight, maxHeight)
+        }
+    }
+}

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift

@@ -9,7 +9,7 @@ class PointOfSaleBarcodeScannerSetupFlow {
     private let onBackToSelection: () -> Void
     fileprivate let onDismiss: () -> Void
     private var flowSteps: [PointOfSaleBarcodeScannerStepID: PointOfSaleBarcodeScannerSetupStep] = [:]
-    private var currentStepKey: PointOfSaleBarcodeScannerStepID = .setupBarcodeHID
+    private(set) var currentStepKey: PointOfSaleBarcodeScannerStepID = .setupBarcodeHID
     private let analytics: Analytics
 
     init(scannerType: PointOfSaleBarcodeScannerType,

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlowManager.swift

@@ -12,6 +12,10 @@ class PointOfSaleBarcodeScannerSetupFlowManager {
     private let analytics: Analytics
     private var keyboardObserver: NSObjectProtocol?
 
+    var currentStepKey: String? {
+        currentFlow?.currentStepKey.rawValue
+    }
+
     init(isPresented: Binding<Bool>, analytics: Analytics = ServiceLocator.analytics) {
         self._isPresented = isPresented
         self.analytics = analytics

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleFlowButtonsView.swift

@@ -1,5 +1,6 @@
 import SwiftUI
 
+@available(iOS 17.0, *)
 struct PointOfSaleFlowButtonsView: View {
     let configuration: PointOfSaleFlowButtonConfiguration
 
@@ -21,6 +22,7 @@ struct PointOfSaleFlowButtonsView: View {
                 .disabled(!primaryButton.isEnabled)
             }
         }
+        .geometryGroup()
     }
 }
 

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

@@ -2,6 +2,7 @@ import SwiftUI
 
 struct POSRootModalViewModifier: ViewModifier {
     @EnvironmentObject var modalManager: POSModalManager
+    @State private var modalParentSize: CGSize = UIScreen.main.bounds.size
 
     private let animationDuration = Constants.animationDuration
     private let scaleTransitionAmount = Constants.scaleTransitionAmount
@@ -21,10 +22,11 @@ struct POSRootModalViewModifier: ViewModifier {
                             modalManager.dismiss()
                         }
                     }
-                    // Don't scale/fade in the backdrop
+                // Don't scale/fade in the backdrop
                     .animation(nil, value: modalManager.isPresented)
                 ZStack {
                     modalManager.getContent()
+                        .environment(\.posModalParentSize, modalParentSize)
                         .background(Color.posSurfaceBright)
                         .cornerRadius(POSCornerRadiusStyle.extraLarge.value)
                         .posShadow(.large, cornerRadius: POSCornerRadiusStyle.extraLarge.value)
@@ -38,8 +40,17 @@ struct POSRootModalViewModifier: ViewModifier {
                 .transition(.scale(scale: scaleTransitionAmount).combined(with: .opacity))
             }
         }
+        .measureFrame { frame in
+            updateModalParentSize(with: frame.size)
+        }
         .animation(.easeInOut(duration: animationDuration), value: modalManager.isPresented)
     }
+
+    private func updateModalParentSize(with size: CGSize) {
+        if size != modalParentSize && size != .zero {
+            modalParentSize = size
+        }
+    }
 }
 
 private extension POSRootModalViewModifier {
@@ -178,3 +189,18 @@ extension View {
         self.modifier(POSInteractiveDismissModifier(disabled: disabled))
     }
 }
+
+// MARK: - POS Modal Parent Size Environment
+
+/// Environment key for tracking the current screen size in POS modals
+struct POSModalParentSizeKey: EnvironmentKey {
+    static let defaultValue: CGSize = UIScreen.main.bounds.size
+}
+
+extension EnvironmentValues {
+    /// The current screen size available to the POS modal
+    var posModalParentSize: CGSize {
+        get { self[POSModalParentSizeKey.self] }
+        set { self[POSModalParentSizeKey.self] = newValue }
+    }
+}