Add Star set up code view in set up flow

Author: joshheald

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

@@ -85,7 +85,12 @@ class PointOfSaleBarcodeScannerSetupFlow {
             ]
         case .starBSH20B:
             return [
-                createWelcomeStep(title: "Star BSH-20B Setup")
+                PointOfSaleBarcodeScannerSetupStep(content: {
+                    PointOfSaleBarcodeScannerBarcodeView(
+                        title: String(format: Localization.starSetUpBarcodeStepTitleFormat, scannerType.name),
+                        instruction: Localization.setUpBarcodeStepInstruction,
+                        barcode: .starBsh20SetupBarcode)
+                })
                 // TODO: Add more steps for Star BSH-20B WOOMOB-696
             ]
         case .tbcScanner:
@@ -131,5 +136,8 @@ private extension PointOfSaleBarcodeScannerSetupFlow {
             value: "Back",
             comment: "Title for the back button in barcode scanner setup navigation"
         )
+        //TODO: WOOMOB-792
+        static let starSetUpBarcodeStepTitleFormat = "%1$@ Setup"
+        static let setUpBarcodeStepInstruction = "Scan the barcode to set up your scanner."
     }
 }

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

@@ -13,6 +13,29 @@ enum PointOfSaleBarcodeScannerType {
     case starBSH20B
     case tbcScanner
     case other
+
+    var name: String {
+        switch self {
+        case .socketS720:
+            return Localization.socketS720Name
+        case .starBSH20B:
+            return Localization.starBsh20BName
+        case .tbcScanner:
+            return Localization.tbcScannerName
+        case .other:
+            return Localization.otherName
+        }
+    }
+}
+
+private extension PointOfSaleBarcodeScannerType {
+    //TODO: WOOMOB-792
+    enum Localization {
+        static let socketS720Name = "Socket S720"
+        static let starBsh20BName = "Star BSH-20B"
+        static let tbcScannerName = "TBC scanner"
+        static let otherName = "Other scanner"
+    }
 }
 
 // MARK: - Flow State
@@ -35,7 +58,7 @@ struct PointOfSaleBarcodeScannerSetupStep {
     let buttonCustomization: PointOfSaleBarcodeScannerButtonCustomization?
 
     init(
-        title: String,
+        title: String = "",
         @ViewBuilder content: () -> any View,
         buttonCustomization: PointOfSaleBarcodeScannerButtonCustomization? = nil
     ) {

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

@@ -19,6 +19,32 @@ struct PointOfSaleBarcodeScannerWelcomeView: View {
     }
 }
 
+struct PointOfSaleBarcodeScannerBarcodeView: View {
+    let title: String
+    let instruction: String
+    let barcode: PointOfSaleAssets
+
+    var body: some View {
+        VStack(spacing: POSSpacing.xLarge) {
+            VStack(alignment: .center, spacing: POSSpacing.small) {
+                Text(title)
+                    .font(.posHeadingBold)
+                    .foregroundColor(.posOnSurface)
+                    .accessibilityAddTraits(.isHeader)
+
+                Text(instruction)
+                    .font(.posBodyMediumRegular())
+                    .foregroundColor(.posOnSurfaceVariantHighest)
+                    .multilineTextAlignment(.center)
+            }
+
+            Image(barcode.imageName)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+}
+
+
 // MARK: - Button Customizations
 @available(iOS 17.0, *)
 struct PointOfSaleBarcodeScannerWelcomeButtonCustomization: PointOfSaleBarcodeScannerButtonCustomization {

WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift

@@ -14,6 +14,7 @@ enum PointOfSaleAssets: CaseIterable {
     case shoppingBags
     case successCheck
     case coupons
+    case starBsh20SetupBarcode
 
     var imageName: String {
         switch self {
@@ -43,6 +44,8 @@ enum PointOfSaleAssets: CaseIterable {
             "pos-success-check"
         case .coupons:
             "coupons"
+        case .starBsh20SetupBarcode:
+            "star-bsh20-setup-barcode"
         }
     }
 }

WooCommerce/Resources/Images.xcassets/POS/star-bsh20-setup-barcode.imageset/Contents.json

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