[Woo POS][Barcodes] Copy, Localization, and UI adjustments (#15948)

staskus · web-flow · commit c9c8b485b4cb · 2025-07-26T19:05:14.000+02:00
diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift
@@ -17,7 +17,7 @@ struct PointOfSaleBarcodeScannerSetup: View {
             maxHeight: parentSize.height * Constants.maxParentHeightRatio,
             id: flowManager.currentStepKey
         ) {
-            VStack(spacing: POSSpacing.xxLarge) {
+            VStack(spacing: POSSpacing.xLarge) {
                 ScrollView(showsIndicators: false) {
                     HStack {
                         Spacer()
@@ -35,7 +35,7 @@ struct PointOfSaleBarcodeScannerSetup: View {
             .posModalCloseButton(action: {
                 isPresented = false
             })
-            .padding(POSPadding.xxLarge)
+            .padding(POSPadding.xLarge)
             .background(Color.posSurfaceBright)
         }
         .onAppear {
@@ -117,6 +117,8 @@ private extension PointOfSaleBarcodeScannerSetup {
     }
 }
 
+// MARK: - Previews
+
 @available(iOS 17.0, *)
 #Preview {
     PointOfSaleBarcodeScannerSetup(isPresented: .constant(true))
diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift
@@ -377,7 +377,11 @@ struct PointOfSaleBarcodeScannerOptionalScannerInformationButtonCustomization: P
     }
 
     private enum Localization {
-        static let informationButtonTitle = "How to set up barcodes on products"
+        static let informationButtonTitle = NSLocalizedString(
+            "pos.barcodeScannerSetup.productBarcodeInformation.button.title",
+            value: "How to set up barcodes on products",
+            comment: "Button title for accessing product barcode setup information"
+        )
     }
 }
 
@@ -451,9 +455,20 @@ private extension PointOfSaleBarcodeScannerSetupFlow {
             comment: "Title for the done button in barcode scanner setup navigation"
         )
 
-        //TODO: WOOMOB-792
-        static let scannerSetUpBarcodeStepTitleFormat = "Scanner Setup"
-        static let setUpBarcodeHIDStepInstruction = "Scan the Bluetooth HID symbol."
-        static let setUpBarcodePairStepInstruction = "Scan the Pair symbol to get the scanner ready for pairing."
+        static let scannerSetUpBarcodeStepTitleFormat = NSLocalizedString(
+            "pos.barcodeScannerSetup.scanner.setup.title.format",
+            value: "Scanner setup",
+            comment: "Title format for barcode scanner setup step"
+        )
+        static let setUpBarcodeHIDStepInstruction = NSLocalizedString(
+            "pos.barcodeScannerSetup.hidSetup.instruction",
+            value: "Use your barcode scanner to scan the code below to enable Bluetooth HID mode.",
+            comment: "Instruction for scanning the Bluetooth HID barcode during scanner setup"
+        )
+        static let setUpBarcodePairStepInstruction = NSLocalizedString(
+            "pos.barcodeScannerSetup.pairSetup.instruction",
+            value: "Use your barcode scanner to scan the code below to enter pairing mode.",
+            comment: "Instruction for scanning the Pair barcode to prepare scanner for pairing"
+        )
     }
 }
diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupModels.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupModels.swift
@@ -41,12 +41,27 @@ enum PointOfSaleBarcodeScannerType {
 }
 
 private extension PointOfSaleBarcodeScannerType {
-    //TODO: WOOMOB-792
     enum Localization {
-        static let starBsh20BName = "Star BSH-20B"
-        static let tera12002DName = "Tera 1200 2D"
-        static let netum1228BCName = "Netum 1228BC"
-        static let otherName = "Other scanner"
+        static let starBsh20BName = NSLocalizedString(
+            "pos.barcodeScannerSetup.scannerType.starBSH20B.name",
+            value: "Star BSH-20B",
+            comment: "Display name for Star BSH-20B barcode scanner model"
+        )
+        static let tera12002DName = NSLocalizedString(
+            "pos.barcodeScannerSetup.scannerType.tera12002D.name",
+            value: "Tera 1200 2D",
+            comment: "Display name for Tera 1200 2D barcode scanner model"
+        )
+        static let netum1228BCName = NSLocalizedString(
+            "pos.barcodeScannerSetup.scannerType.netum1228BC.name",
+            value: "Netum 1228BC",
+            comment: "Display name for Netum 1228BC barcode scanner model"
+        )
+        static let otherName = NSLocalizedString(
+            "pos.barcodeScannerSetup.scannerType.other.name",
+            value: "Other scanner",
+            comment: "Display name for other/unspecified barcode scanner models"
+        )
     }
 }
 
diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupStepViews.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupStepViews.swift
@@ -15,7 +15,7 @@ struct PointOfSaleBarcodeScannerBarcodeView: View {
 
                 Text(instruction)
                     .font(.posBodyLargeRegular())
-                    .foregroundColor(.posOnSurfaceVariantHighest)
+                    .foregroundColor(.posOnSurface)
                     .multilineTextAlignment(.center)
             }
 
@@ -41,7 +41,6 @@ struct PointOfSaleBarcodeScannerPairingView: View {
 
     var body: some View {
         VStack(spacing: POSSpacing.xLarge) {
-            // Temporary image until finalised assets are available
             Image(decorative: PointOfSaleAssets.gears.imageName)
                 .resizable()
                 .frame(width: Constants.gearIconSize, height: Constants.gearIconSize)
@@ -54,7 +53,7 @@ struct PointOfSaleBarcodeScannerPairingView: View {
 
                 Text(instruction)
                     .font(.posBodyLargeRegular())
-                    .foregroundColor(.posOnSurfaceVariantHighest)
+                    .foregroundColor(.posOnSurface)
                     .multilineTextAlignment(.center)
             }
 
@@ -67,8 +66,11 @@ struct PointOfSaleBarcodeScannerPairingView: View {
                 UIApplication.shared.open(targetURL)
             } label: {
                 Text(Localization.settingsButtonTitle)
+                    .font(.posBodyLargeRegular())
+                    .foregroundColor(.posPrimaryContainer)
+                    .underline()
             }
-            .buttonStyle(POSOutlinedButtonStyle(size: .extraSmall))
+            .padding(.top, POSSpacing.large)
         }
     }
 
@@ -78,11 +80,22 @@ struct PointOfSaleBarcodeScannerPairingView: View {
 }
 
 private extension PointOfSaleBarcodeScannerPairingView {
-    //TODO: WOOMOB-792
     enum Localization {
-        static let settingsButtonTitle = "Go to settings"
-        static let title = "Pair your scanner"
-        static let instructionFormat = "Enable Bluetooth and select your %1$@ scanner in iOS Settings."
+        static let settingsButtonTitle = NSLocalizedString(
+            "pos.barcodeScannerSetup.pairing.settingsButton.title",
+            value: "Go to your device settings",
+            comment: "Button title to open device Settings for scanner pairing"
+        )
+        static let title = NSLocalizedString(
+            "pos.barcodeScannerSetup.pairing.title",
+            value: "Pair your scanner",
+            comment: "Title for the scanner pairing step"
+        )
+        static let instructionFormat = NSLocalizedString(
+            "pos.barcodeScannerSetup.pairing.instruction.format",
+            value: "Enable Bluetooth and select your %1$@ scanner in the iOS Bluetooth settings. The scanner will beep and show a solid LED when paired.",
+            comment: "Instruction for pairing scanner via device settings with feedback indicators. %1$@ is the scanner model name."
+        )
     }
 
     enum Constants {
@@ -117,10 +130,26 @@ struct PointOfSaleBarcodeScannerTestBarcodeView: View {
 @available(iOS 17.0, *)
 private extension PointOfSaleBarcodeScannerTestBarcodeView {
     enum Localization {
-        static let title = "Test your scanner"
-        static let instruction = "Scan the barcode to test your scanner"
-        static let timeoutTitle = "No scan data found yet"
-        static let timeoutInstruction = "Scan the barcode to test your scanner. If the issue continues, please check Bluetooth settings and try again."
+        static let title = NSLocalizedString(
+            "pos.barcodeScannerSetup.test.title",
+            value: "Test your scanner",
+            comment: "Title for the scanner testing step"
+        )
+        static let instruction = NSLocalizedString(
+            "pos.barcodeScannerSetup.test.instruction",
+            value: "Scan the barcode to test your scanner.",
+            comment: "Instruction for testing the scanner by scanning a barcode"
+        )
+        static let timeoutTitle = NSLocalizedString(
+            "pos.barcodeScannerSetup.test.timeout.title",
+            value: "No scan data found yet",
+            comment: "Title shown when scanner test times out without detecting a scan"
+        )
+        static let timeoutInstruction = NSLocalizedString(
+            "pos.barcodeScannerSetup.test.timeout.instruction",
+            value: "Scan the barcode to test your scanner. If the issue continues, please check Bluetooth settings and try again.",
+            comment: "Instruction shown when scanner test times out, suggesting troubleshooting steps"
+        )
     }
 }
 
@@ -139,7 +168,7 @@ struct PointOfSaleBarcodeScannerSetupCompleteView: View {
 
                 Text(Localization.instruction)
                     .font(.posBodyLargeRegular())
-                    .foregroundColor(.posOnSurfaceVariantHighest)
+                    .foregroundColor(.posOnSurface)
                     .multilineTextAlignment(.center)
             }
         }
@@ -148,23 +177,29 @@ struct PointOfSaleBarcodeScannerSetupCompleteView: View {
     @ViewBuilder private var successIcon: some View {
         ZStack {
             Circle()
-                .frame(width: 104, height: 104)
+                .frame(width: 88, height: 88)
                 .foregroundColor(.posSuccess)
             Image(PointOfSaleAssets.successCheck.imageName)
                 .renderingMode(.template)
                 .resizable()
-                .frame(width: 48, height: 48)
+                .frame(width: 36, height: 36)
                 .foregroundColor(.posOnSuccess)
         }
     }
 }
 
 private extension PointOfSaleBarcodeScannerSetupCompleteView {
     enum Localization {
-        //TODO: WOOMOB-792
-        static let title = "Scanner set up!"
-        static let instruction = "You are ready to start scanning products. \n" +
-        "Read more about barcode and QR code scanner support."
+        static let title = NSLocalizedString(
+            "pos.barcodeScannerSetup.complete.title",
+            value: "Scanner set up!",
+            comment: "Title shown when scanner setup is successfully completed"
+        )
+        static let instruction = NSLocalizedString(
+            "pos.barcodeScannerSetup.complete.instruction",
+            value: "You are ready to start scanning products. \nRead more about barcode and QR code scanner support.",
+            comment: "Message shown when scanner setup is complete, with additional information link"
+        )
     }
 }
 
@@ -181,16 +216,84 @@ struct PointOfSaleBarcodeScannerErrorView: View {
 
                 Text(Localization.instruction)
                     .font(.posBodyLargeRegular())
-                    .foregroundColor(.posOnSurfaceVariantHighest)
+                    .foregroundColor(.posOnSurface)
                     .multilineTextAlignment(.center)
             }
         }
         .padding(POSSpacing.xLarge)
     }
 
     private enum Localization {
-        static let title = "Scanning issue found"
-        static let instruction = "Please check the scanner’s manual and reset it \n" +
-        "to factory settings, then retry the set up flow."
+        static let title = NSLocalizedString(
+            "pos.barcodeScannerSetup.error.title",
+            value: "Scanning issue found",
+            comment: "Title shown when there's an error during scanner setup"
+        )
+        static let instruction = NSLocalizedString(
+            "pos.barcodeScannerSetup.error.instruction",
+            value: "Please check the scanner's manual and reset it to factory settings, then retry the setup flow.",
+            comment: "Instruction shown when scanner setup encounters an error, suggesting troubleshooting steps"
+        )
     }
 }
+
+// MARK: - Previews
+
+@available(iOS 17.0, *)
+#Preview("Barcode View - HID Setup") {
+    PointOfSaleBarcodeScannerBarcodeView(
+        title: "Star BSH-20B setup",
+        instruction: "Use your barcode scanner to scan the code below to enable Bluetooth HID mode.",
+        barcode: .starBsh20SetupBarcode
+    )
+}
+
+@available(iOS 17.0, *)
+#Preview("Barcode View - Barcode Setup") {
+    PointOfSaleBarcodeScannerBarcodeView(
+        title: "Scanner setup",
+        instruction: "Use your barcode scanner to scan the code below to enable Bluetooth HID mode.",
+        barcode: .netum1228BCHIDBarcode
+    )
+}
+
+@available(iOS 17.0, *)
+#Preview("Pairing View - Netum 1228BC") {
+    PointOfSaleBarcodeScannerPairingView(scanner: .netum1228BC)
+}
+
+@available(iOS 17.0, *)
+#Preview("Test View - Normal") {
+    PointOfSaleBarcodeScannerTestBarcodeView(
+        scanTester: PointOfSaleBarcodeScannerSetupScanTester(
+            onTestPass: {},
+            onTestFailure: { _ in },
+            onTestTimeout: {},
+            barcodeDefinition: .ean13
+        ),
+        timerCompleted: false
+    )
+}
+
+@available(iOS 17.0, *)
+#Preview("Test View - Timeout") {
+    PointOfSaleBarcodeScannerTestBarcodeView(
+        scanTester: PointOfSaleBarcodeScannerSetupScanTester(
+            onTestPass: {},
+            onTestFailure: { _ in },
+            onTestTimeout: {},
+            barcodeDefinition: .ean13
+        ),
+        timerCompleted: true
+    )
+}
+
+@available(iOS 17.0, *)
+#Preview("Setup Complete View") {
+    PointOfSaleBarcodeScannerSetupCompleteView()
+}
+
+@available(iOS 17.0, *)
+#Preview("Error View") {
+    PointOfSaleBarcodeScannerErrorView()
+}
diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupViews.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupViews.swift
@@ -35,11 +35,16 @@ struct PointOfSaleBarcodeScannerSetupSelectionView: View {
 // MARK: - Private Localization Extensions
 private extension PointOfSaleBarcodeScannerSetupSelectionView {
     enum Localization {
-        //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:"
+        static let setupIntroMessage = NSLocalizedString(
+            "pos.barcodeScannerSetup.selection.introMessage",
+            value: "Select a model from the list:",
+            comment: "Instruction message for selecting a barcode scanner 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"
+        static let setupHeading = NSLocalizedString(
+            "pos.barcodeScannerSetup.selection.heading",
+            value: "Set up a barcode scanner",
+            comment: "Heading for the barcode scanner setup selection screen"
+        )
     }
 }
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift
@@ -16,7 +16,6 @@ enum PointOfSaleAssets: CaseIterable {
     case coupons
     case gears
     case barcodeFieldScreenshot
-    //TODO: WOOMOB-793 Update the imagesets for these barcodes to vector/dark mode friendly images
     case starBsh20SetupBarcode
     case tera12002DHIDBarcode
     case tera12002DPairBarcode
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift
@@ -147,8 +147,17 @@ private enum Localization {
         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 scannerInfoHeading = NSLocalizedString(
+        "pos.barcodeScannerSetup.scannerInfo.title",
+        value: "Scanner setup",
+        comment: "Title format for barcode scanner setup step"
+    )
+
+    static let productBarcodeInfoHeading = NSLocalizedString(
+        "pos.barcodeScannerSetup.productBarcodeInfo.title",
+        value: "How to set up barcodes on products",
+        comment: "Title format for a product barcode setup step"
+    )
 
     static let legacyBarcodeInfoIntroMessage = NSLocalizedString(
         "pos.barcodeInfoModal.introMessage",
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalCloseButton.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalCloseButton.swift
@@ -22,9 +22,9 @@ struct POSModalCloseButton: ViewModifier {
                 Spacer()
                 Button(action: closeAction, label: {
                     Text(Image(systemName: "xmark"))
-                        .font(.posButtonSymbolSmall)
+                        .font(.posButtonSymbolMedium)
                 })
-                .foregroundColor(Color.posOnSurfaceVariantLowest)
+                .foregroundColor(Color.posOnSurface)
                 .accessibilityLabel(accessibilityLabel)
             }
 

Original file line number	Diff line number	Diff line change
`@@ -377,7 +377,11 @@ struct PointOfSaleBarcodeScannerOptionalScannerInformationButtonCustomization: P`
`377`	`377`	`}`
`378`	`378`
`379`	`379`	`private enum Localization {`
`380`		`- static let informationButtonTitle = "How to set up barcodes on products"`
	`380`	`+ static let informationButtonTitle = NSLocalizedString(`
	`381`	`+ "pos.barcodeScannerSetup.productBarcodeInformation.button.title",`
	`382`	`+ value: "How to set up barcodes on products",`
	`383`	`+ comment: "Button title for accessing product barcode setup information"`
	`384`	`+ )`
`381`	`385`	`}`
`382`	`386`	`}`
`383`	`387`
`@@ -451,9 +455,20 @@ private extension PointOfSaleBarcodeScannerSetupFlow {`
`451`	`455`	`comment: "Title for the done button in barcode scanner setup navigation"`
`452`	`456`	`)`
`453`	`457`
`454`		`- //TODO: WOOMOB-792`
`455`		`- static let scannerSetUpBarcodeStepTitleFormat = "Scanner Setup"`
`456`		`- static let setUpBarcodeHIDStepInstruction = "Scan the Bluetooth HID symbol."`
`457`		`- static let setUpBarcodePairStepInstruction = "Scan the Pair symbol to get the scanner ready for pairing."`
	`458`	`+ static let scannerSetUpBarcodeStepTitleFormat = NSLocalizedString(`
	`459`	`+ "pos.barcodeScannerSetup.scanner.setup.title.format",`
	`460`	`+ value: "Scanner setup",`
	`461`	`+ comment: "Title format for barcode scanner setup step"`
	`462`	`+ )`
	`463`	`+ static let setUpBarcodeHIDStepInstruction = NSLocalizedString(`
	`464`	`+ "pos.barcodeScannerSetup.hidSetup.instruction",`
	`465`	`+ value: "Use your barcode scanner to scan the code below to enable Bluetooth HID mode.",`
	`466`	`+ comment: "Instruction for scanning the Bluetooth HID barcode during scanner setup"`
	`467`	`+ )`
	`468`	`+ static let setUpBarcodePairStepInstruction = NSLocalizedString(`
	`469`	`+ "pos.barcodeScannerSetup.pairSetup.instruction",`
	`470`	`+ value: "Use your barcode scanner to scan the code below to enter pairing mode.",`
	`471`	`+ comment: "Instruction for scanning the Pair barcode to prepare scanner for pairing"`
	`472`	`+ )`
`458`	`473`	`}`
`459`	`474`	`}`