Add product setup info screen

Author: joshheald

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

@@ -148,8 +148,9 @@ class PointOfSaleBarcodeScannerSetupFlow {
                     content: {
                         PointOfSaleBarcodeScannerSetupCompleteView()
                     },
+                    buttonCustomization: PointOfSaleBarcodeScannerOptionalScannerInformationButtonCustomization(),
                     transitions: [
-                        .back: .test
+                        .optionalNext: .information,
                     ]),
                 .testFailed: PointOfSaleBarcodeScannerSetupStep(
                     content: {
@@ -160,8 +161,11 @@ class PointOfSaleBarcodeScannerSetupFlow {
                         .retry: .start,
                         .back: .test
                     ]
+                ),
+                .information: PointOfSaleBarcodeScannerSetupStep(
+                    content: { ProductBarcodeSetupInformation() },
+                    buttonCustomization: PointOfSaleBarcodeScannerNoButtonsButtonCustomization()
                 )
-                // TODO: add product barcode setup info step WOOMOB-696
             ]
         case .tbcScanner:
             return [
@@ -171,9 +175,14 @@ class PointOfSaleBarcodeScannerSetupFlow {
         case .other:
             return [
                 .start: PointOfSaleBarcodeScannerSetupStep(
-                    content: { BarcodeScannerInformation() }
+                    content: { BarcodeScannerInformation() },
+                    transitions: [.next: .information]
+                ),
+                .information: PointOfSaleBarcodeScannerSetupStep(
+                    content: { ProductBarcodeSetupInformation() },
+                    buttonCustomization: PointOfSaleBarcodeScannerBackOnlyButtonCustomization(),
+                    transitions: [.back: .start]
                 )
-                // TODO: Add product barcode setup info step
             ]
         }
     }
@@ -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: .optionalNext) }
+            )
+        )
+    }
+
+    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

@@ -64,6 +64,7 @@ protocol PointOfSaleBarcodeScannerButtonCustomization {
 // MARK: - Transition Types
 enum PointOfSaleBarcodeScannerTransitionType: Hashable {
     case next
+    case optionalNext
     case error
     case retry
     case back

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:

WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift

@@ -60,7 +60,7 @@ struct LegacyBarcodeScannerInformationContent: View {
 
 struct BarcodeScannerInformation: View {
     var body: some View {
-        VStack(spacing: POSSpacing.xxLarge){
+        VStack(spacing: POSSpacing.xxLarge) {
             Text(Localization.scannerInfoHeading)
                 .font(.posHeadingBold)
                 .accessibilityAddTraits(.isHeader)
@@ -91,6 +91,45 @@ struct BarcodeScannerInformation: View {
     }
 }
 
+@available(iOS 17.0, *)
+struct ProductBarcodeSetupInformation: View {
+    var body: some View {
+        VStack(spacing: POSSpacing.xxLarge) {
+            Text(Localization.productBarcodeInfoHeading)
+                .font(.posHeadingBold)
+                .accessibilityAddTraits(.isHeader)
+
+            VStack(spacing: POSSpacing.medium) {
+                PointOfSaleInformationModalParagraphView {
+                    Text(bulletPointWithLink)
+                        .accessibilityLabel(bulletPointWithLinkAccessibilityLabel)
+                }
+            }
+
+            Image(decorative: PointOfSaleAssets.barcodeFieldScreenshot.imageName)
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+        }
+        .onAppear(perform: {
+            ServiceLocator.analytics.track(.pointOfSaleBarcodeScanningExplanationDialogShown)
+        })
+    }
+
+    private var bulletPointWithLink: AttributedString {
+        var secondary = AttributedString(Localization.barcodeInfoPrimaryMessage + " ")
+        var moreDetails = AttributedString(Localization.barcodeInfoMoreDetailsLink)
+        moreDetails.link = Constants.detailsLink
+        moreDetails.foregroundColor = .posPrimary
+        moreDetails.underlineStyle = .single
+        secondary.append(moreDetails)
+        return secondary
+    }
+
+    private var bulletPointWithLinkAccessibilityLabel: String {
+        return Localization.barcodeInfoPrimaryMessageAccessible + " " + Localization.barcodeInfoMoreDetailsLinkAccessible
+    }
+}
+
 private enum Constants {
     static let detailsLink = URL(string: "https://woocommerce.com/document/barcode-and-qr-code-scanner/")
 }
@@ -102,11 +141,8 @@ private enum Localization {
         comment: "Heading for the barcode info modal in POS, introducing barcode scanning feature"
     )
 
-    static let scannerInfoHeading = NSLocalizedString(
-        "pos.scannerInfoModal.heading",
-        value: "Scanner set up",
-        comment: "Heading for the barcode info modal in POS, introducing barcode scanning feature"
-    )
+    static let scannerInfoHeading = "Scanner set up"
+    static let productBarcodeInfoHeading = "How to set up barcodes on products"
 
     static let barcodeInfoIntroMessage = NSLocalizedString(
         "pos.barcodeInfoModal.introMessage",

WooCommerce/Resources/Images.xcassets/POS/barcode-field-screenshot.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "barcode-field-screenshot.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}