diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift index 537ee9f031c..21d1b600b14 100644 --- 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 index 06b1f262f75..515a0d059ff 100644 --- 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 index 6bd210d4e47..5e1c83bf8bb 100644 --- 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 index 6dca9528264..ba8d425ee79 100644 --- 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,12 +177,12 @@ 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) } } @@ -161,10 +190,16 @@ struct PointOfSaleBarcodeScannerSetupCompleteView: View { 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,7 +216,7 @@ struct PointOfSaleBarcodeScannerErrorView: View { Text(Localization.instruction) .font(.posBodyLargeRegular()) - .foregroundColor(.posOnSurfaceVariantHighest) + .foregroundColor(.posOnSurface) .multilineTextAlignment(.center) } } @@ -189,8 +224,76 @@ struct PointOfSaleBarcodeScannerErrorView: View { } 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 index d1106a0e6a4..924178c8b37 100644 --- 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 index f36b42bc06d..4c8070ad7f0 100644 --- 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 index fb362a5937b..aa076e210ec 100644 --- 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 index 2731beb06e7..13aae6de8b6 100644 --- 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) }