[Woo POS][Barcodes] Separate barcode and scanner info screens (#15905)

Author: staskus

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

@@ -12,10 +12,6 @@ struct PointOfSaleBarcodeScannerSetup: View {
 
     var body: some View {
         VStack(spacing: POSSpacing.xxLarge) {
-            // Header
-            PointOfSaleModalHeader(isPresented: $isPresented,
-                                   title: .constant(AttributedString(currentTitle)))
-
             VStack {
                 currentContent
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
@@ -24,8 +20,13 @@ struct PointOfSaleBarcodeScannerSetup: View {
             .scrollVerticallyIfNeeded()
 
             // Bottom buttons
-            PointOfSaleFlowButtonsView(configuration: flowManager.buttonConfiguration)
+            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
@@ -37,15 +38,6 @@ struct PointOfSaleBarcodeScannerSetup: View {
     }
 
     // MARK: - Computed Properties
-    private var currentTitle: String {
-        switch flowManager.currentState {
-        case .scannerSelection:
-            return Localization.setupHeading
-        case .setupFlow:
-            return flowManager.getCurrentStep()?.title ?? Localization.setupHeading
-        }
-    }
-
     @ViewBuilder
     private var currentContent: some View {
         switch flowManager.currentState {
@@ -64,22 +56,18 @@ struct PointOfSaleBarcodeScannerSetup: View {
         [
             PointOfSaleBarcodeScannerSetupFlowOption(
                 title: Localization.socketS720Title,
-                subtitle: Localization.socketS720Subtitle,
                 scannerType: .socketS720
             ),
             PointOfSaleBarcodeScannerSetupFlowOption(
                 title: Localization.starBSH20BTitle,
-                subtitle: Localization.starBSH20BSubtitle,
                 scannerType: .starBSH20B
             ),
             PointOfSaleBarcodeScannerSetupFlowOption(
                 title: Localization.tbcScannerTitle,
-                subtitle: Localization.tbcScannerSubtitle,
                 scannerType: .tbcScanner
             ),
             PointOfSaleBarcodeScannerSetupFlowOption(
                 title: Localization.otherTitle,
-                subtitle: Localization.otherSubtitle,
                 scannerType: .other
             )
         ]
@@ -88,59 +76,33 @@ struct PointOfSaleBarcodeScannerSetup: View {
 
 // MARK: - Constants
 private enum Constants {
-    static var modalFrameMaxSmallDimension: CGFloat { 752 }
+    static var modalFrameMaxSmallDimension: CGFloat { 616 }
 }
 
 // MARK: - Private Localization Extension
 @available(iOS 17.0, *)
 private extension PointOfSaleBarcodeScannerSetup {
     enum Localization {
-        static let setupHeading = NSLocalizedString(
-            "pos.barcodeScannerSetup.heading",
-            value: "Barcode Scanner Setup",
-            comment: "Heading for the barcode scanner setup flow in POS"
-        )
-
         static let socketS720Title = NSLocalizedString(
             "pos.barcodeScannerSetup.socketS720.title",
             value: "Socket S720",
             comment: "Title for Socket S720 scanner option in barcode scanner setup"
         )
-        static let socketS720Subtitle = NSLocalizedString(
-            "pos.barcodeScannerSetup.socketS720.subtitle",
-            value: "Small handheld scanner with a charging dock or stand",
-            comment: "Subtitle for Socket S720 scanner option in barcode scanner setup"
-        )
         static let starBSH20BTitle = NSLocalizedString(
             "pos.barcodeScannerSetup.starBSH20B.title",
             value: "Star BSH-20B",
             comment: "Title for Star BSH-20B scanner option in barcode scanner setup"
         )
-        static let starBSH20BSubtitle = NSLocalizedString(
-            "pos.barcodeScannerSetup.starBSH20B.subtitle",
-            value: "Ergonomic scanner with a stand",
-            comment: "Subtitle for Star BSH-20B scanner option in barcode scanner setup"
-        )
         static let tbcScannerTitle = NSLocalizedString(
             "pos.barcodeScannerSetup.tbcScanner.title",
             value: "Scanner TBC",
             comment: "Title for TBC scanner option in barcode scanner setup"
         )
-        static let tbcScannerSubtitle = NSLocalizedString(
-            "pos.barcodeScannerSetup.tbcScanner.subtitle",
-            value: "Recommended scanner",
-            comment: "Subtitle for TBC scanner option in barcode scanner setup"
-        )
         static let otherTitle = NSLocalizedString(
             "pos.barcodeScannerSetup.other.title",
             value: "Other",
             comment: "Title for other scanner option in barcode scanner setup"
         )
-        static let otherSubtitle = NSLocalizedString(
-            "pos.barcodeScannerSetup.other.subtitle",
-            value: "General scanner setup instructions",
-            comment: "Subtitle for other scanner option in barcode scanner setup"
-        )
     }
 }
 

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

@@ -148,8 +148,9 @@ class PointOfSaleBarcodeScannerSetupFlow {
                     content: {
                         PointOfSaleBarcodeScannerSetupCompleteView()
                     },
+                    buttonCustomization: PointOfSaleBarcodeScannerOptionalScannerInformationButtonCustomization(),
                     transitions: [
-                        .back: .test
+                        .next: .information,
                     ]),
                 .testFailed: PointOfSaleBarcodeScannerSetupStep(
                     content: {
@@ -160,8 +161,11 @@ class PointOfSaleBarcodeScannerSetupFlow {
                         .retry: .start,
                         .back: .test
                     ]
+                ),
+                .information: PointOfSaleBarcodeScannerSetupStep(
+                    content: { ProductBarcodeSetupInformation() },
+                    buttonCustomization: PointOfSaleBarcodeScannerNoButtonsButtonCustomization()
                 )
-                // TODO: Add optional error step and documentation step for Star BSH-20B WOOMOB-696
             ]
         case .tbcScanner:
             return [
@@ -171,8 +175,13 @@ class PointOfSaleBarcodeScannerSetupFlow {
         case .other:
             return [
                 .start: PointOfSaleBarcodeScannerSetupStep(
-                    title: "General Scanner Setup",
-                    content: { BarcodeScannerInformationContent() }
+                    content: { BarcodeScannerInformation() },
+                    transitions: [.next: .information]
+                ),
+                .information: PointOfSaleBarcodeScannerSetupStep(
+                    content: { ProductBarcodeSetupInformation() },
+                    buttonCustomization: PointOfSaleBarcodeScannerBackOnlyButtonCustomization(),
+                    transitions: [.back: .start]
                 )
             ]
         }
@@ -237,6 +246,31 @@ struct PointOfSaleBarcodeScannerErrorButtonCustomization: PointOfSaleBarcodeScan
     }
 }
 
+@available(iOS 17.0, *)
+struct PointOfSaleBarcodeScannerOptionalScannerInformationButtonCustomization: PointOfSaleBarcodeScannerButtonCustomization {
+    func customizeButtons(for flow: PointOfSaleBarcodeScannerSetupFlow) -> PointOfSaleFlowButtonConfiguration {
+        return PointOfSaleFlowButtonConfiguration(
+            primaryButton: nil,
+            secondaryButton: PointOfSaleFlowButtonConfiguration.ButtonConfig(
+                title: Localization.informationButtonTitle,
+                action: { flow.transition(to: .next) }
+            )
+        )
+    }
+
+    private enum Localization {
+        static let informationButtonTitle = "How to set up barcodes on products"
+    }
+}
+
+@available(iOS 17.0, *)
+struct PointOfSaleBarcodeScannerNoButtonsButtonCustomization: PointOfSaleBarcodeScannerButtonCustomization {
+    func customizeButtons(for flow: PointOfSaleBarcodeScannerSetupFlow) -> PointOfSaleFlowButtonConfiguration {
+        return PointOfSaleFlowButtonConfiguration.noButtons()
+    }
+}
+
+
 // MARK: - Private Localization Extension
 @available(iOS 17.0, *)
 private extension PointOfSaleBarcodeScannerSetupFlow {

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

@@ -4,7 +4,6 @@ import SwiftUI
 struct PointOfSaleBarcodeScannerSetupFlowOption: Identifiable {
     let id = UUID()
     let title: String
-    let subtitle: String
     let scannerType: PointOfSaleBarcodeScannerType
 }
 

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

@@ -38,10 +38,19 @@ struct PointOfSaleBarcodeScannerBarcodeView: View {
             }
 
             Image(barcode.imageName)
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .frame(maxHeight: Constants.maxBarcodeSize)
         }
     }
 }
 
+extension PointOfSaleBarcodeScannerBarcodeView {
+    enum Constants {
+        static let maxBarcodeSize: CGFloat = 168
+    }
+}
+
 struct PointOfSaleBarcodeScannerPairingView: View {
     let scanner: PointOfSaleBarcodeScannerType
 

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

@@ -6,63 +6,40 @@ struct PointOfSaleBarcodeScannerSetupSelectionView: View {
     let onSelection: (PointOfSaleBarcodeScannerType) -> Void
 
     var body: some View {
-        VStack(alignment: .leading, spacing: POSSpacing.medium) {
-            Text(Localization.setupIntroMessage)
-                .font(.posBodyLargeRegular())
-                .foregroundStyle(Color.posOnSurface)
-                .multilineTextAlignment(.leading)
-                .fixedSize(horizontal: false, vertical: true)
-
+        VStack(spacing: POSSpacing.large) {
             VStack(spacing: POSSpacing.small) {
+                Text(Localization.setupHeading)
+                    .accessibilityAddTraits(.isHeader)
+                    .font(.posHeadingBold)
+                Text(Localization.setupIntroMessage)
+                    .font(.posBodyLargeRegular())
+            }
+            .foregroundStyle(Color.posOnSurface)
+            .multilineTextAlignment(.leading)
+            .fixedSize(horizontal: false, vertical: true)
+
+            VStack(spacing: POSSpacing.medium) {
                 ForEach(options) { option in
                     Button {
                         onSelection(option.scannerType)
                     } label: {
-                        PointOfSaleBarcodeScannerOptionView(
-                            title: option.title,
-                            subtitle: option.subtitle
-                        )
+                        Text(option.title)
                     }
-                    .buttonStyle(PlainButtonStyle())
+                    .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
         }
     }
 }
 
-// MARK: - Scanner Option View
-struct PointOfSaleBarcodeScannerOptionView: View {
-    let title: String
-    let subtitle: String
-
-    var body: some View {
-        HStack {
-            VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
-                Text(title)
-                    .font(.posBodyLargeBold)
-                    .foregroundColor(.posOnSurface)
-                Text(subtitle)
-                    .font(.posBodyMediumRegular())
-                    .foregroundColor(.posOnSurfaceVariantHighest)
-            }
-            Spacer()
-            Image(systemName: "chevron.forward")
-                .font(.posBodyMediumBold)
-                .foregroundColor(.posOnSurfaceVariantHighest)
-        }
-        .padding(POSPadding.medium)
-        .background(Color.posSurfaceDim)
-        .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.medium.value))
-    }
-}
-
 // MARK: - Private Localization Extensions
 private extension PointOfSaleBarcodeScannerSetupSelectionView {
     enum Localization {
-        static let setupIntroMessage = NSLocalizedString(
-            "pos.barcodeScannerSetup.introMessage",
-            value: "Choose your barcode scanner to get started with the setup process.",
-            comment: "Introductory message in the barcode scanner setup flow in POS"
-        )
+        //TODO: WOOMOB-792
+        // Note that "pos.barcodeScannerSetup.introMessage" was previously sent for translation, so don't reuse that.
+        static let setupIntroMessage = "Select a model from the list:"
+
+        // Note that "pos.barcodeScannerSetup.heading" was previously sent to translation – don't reuse
+        static let setupHeading = "Set up a barcode scanner"
     }
 }

WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift

@@ -15,6 +15,7 @@ enum PointOfSaleAssets: CaseIterable {
     case successCheck
     case coupons
     case gears
+    case barcodeFieldScreenshot
     //TODO: WOOMOB-793 Update the imagesets for these barcodes to vector/dark mode friendly images
     case starBsh20SetupBarcode
     case testEan13Barcode
@@ -49,6 +50,8 @@ enum PointOfSaleAssets: CaseIterable {
             "coupons"
         case .gears:
             "pos-gears"
+        case .barcodeFieldScreenshot:
+            "barcode-field-screenshot"
         case .starBsh20SetupBarcode:
             "star-bsh20-setup-barcode"
         case .testEan13Barcode: