diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift index 5f6af304c92..e2f196a95c9 100644 --- a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift +++ b/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" - ) } } diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift index 906d9fd9637..f30322b1c9b 100644 --- a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift +++ b/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 { diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupModels.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupModels.swift index 7de0be4441d..3720e6a0547 100644 --- a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupModels.swift +++ b/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 } diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupStepViews.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupStepViews.swift index e75a0530811..93bf4610ab6 100644 --- a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupStepViews.swift +++ b/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 diff --git a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupViews.swift b/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupViews.swift index d6163c10929..d1106a0e6a4 100644 --- a/WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupViews.swift +++ b/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" } } diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift index 6cb87be020f..058d5dcc680 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift +++ b/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: diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift index f65b3649842..405357108d1 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift @@ -10,12 +10,12 @@ struct PointOfSaleBarcodeScannerInformationModal: View { var body: some View { PointOfSaleInformationModal(isPresented: $isPresented, title: AttributedString(Localization.barcodeInfoHeading)) { - BarcodeScannerInformationContent() + LegacyBarcodeScannerInformationContent() } } } -struct BarcodeScannerInformationContent: View { +struct LegacyBarcodeScannerInformationContent: View { var body: some View { VStack(spacing: POSSpacing.medium) { PointOfSaleInformationModalParagraphView { @@ -58,90 +58,159 @@ struct BarcodeScannerInformationContent: View { } } -extension PointOfSaleBarcodeScannerInformationModal { - enum Localization { - static let barcodeInfoHeading = NSLocalizedString( - "pos.barcodeInfoModal.heading", - value: "Barcode scanning", - comment: "Heading for the barcode info modal in POS, introducing barcode scanning feature" - ) +struct BarcodeScannerInformation: View { + var body: some View { + VStack(spacing: POSSpacing.xxLarge) { + Text(Localization.scannerInfoHeading) + .font(.posHeadingBold) + .accessibilityAddTraits(.isHeader) + + VStack(spacing: POSSpacing.medium) { + PointOfSaleInformationModalParagraphView { + Text(AttributedString(Localization.barcodeInfoIntroMessage)) + } + + PointOfSaleInformationModalParagraphView { + Text(AttributedString(Localization.barcodeInfoSecondaryMessage)) + .accessibilityLabel(Localization.barcodeInfoSecondaryMessageAccessible) + Text(AttributedString(Localization.barcodeInfoTertiaryMessage)) + .accessibilityLabel(Localization.barcodeInfoTertiaryMessageAccessible) + Text(AttributedString(Localization.barcodeInfoQuaternaryMessage)) + .accessibilityLabel(Localization.barcodeInfoQuaternaryMessageAccessible) + } + .padding(.leading, POSSpacing.medium) + + PointOfSaleInformationModalParagraphView(style: .outlined) { + Text(AttributedString(Localization.barcodeInfoQuinaryMessage)) + } + } + } + .onAppear(perform: { + ServiceLocator.analytics.track(.pointOfSaleBarcodeScanningExplanationDialogShown) + }) } } -private extension BarcodeScannerInformationContent { - enum Constants { - static let detailsLink = URL(string: "https://woocommerce.com/document/barcode-and-qr-code-scanner/") +@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) + }) } - enum Localization { - static let barcodeInfoIntroMessage = NSLocalizedString( - "pos.barcodeInfoModal.introMessage", - value: "You can scan barcodes using an external scanner to quickly build a cart.", - comment: "Introductory message in the barcode info modal in POS, explaining the use of external barcode scanners" - ) - static let barcodeInfoPrimaryMessage = NSLocalizedString( - "pos.barcodeInfoModal.primaryMessage", - value: "• Set up barcodes in the \"GTIN, UPC, EAN, ISBN\" field in Products > Product Details > Inventory. ", - comment: "Primary bullet point in the barcode info modal in POS, instructing where to set up barcodes in product details" - ) - static let barcodeInfoMoreDetailsLink = NSLocalizedString( - "pos.barcodeInfoModal.moreDetailsLink", - value: "More details.", - comment: "Link text in the barcode info modal in POS, leading to more details about barcode setup" - ) - static let barcodeInfoMoreDetailsLinkAccessible = NSLocalizedString( - "pos.barcodeInfoModal.moreDetailsLink.accessible", - value: "More details, link.", - comment: "Accessible version of more details link in barcode info modal, announcing it as a link for screen readers" - ) - static let barcodeInfoSecondaryMessage = NSLocalizedString( - "pos.barcodeInfoModal.secondaryMessage.2", - value: "• Refer to your Bluetooth barcode scanner's instructions to set HID mode. This usually " + - "requires scanning a special barcode in the manual.", - comment: "Secondary bullet point in the barcode info modal in POS, instructing to set scanner to HID mode" - ) - static let barcodeInfoTertiaryMessage = NSLocalizedString( - "pos.barcodeInfoModal.tertiaryMessage", - value: "• Connect your barcode scanner in iOS Bluetooth settings.", - comment: "Tertiary bullet point in the barcode info modal in POS, instructing to connect scanner via Bluetooth settings" - ) - static let barcodeInfoQuaternaryMessage = NSLocalizedString( - "pos.barcodeInfoModal.quaternaryMessage", - value: "• Scan barcodes while on the item list to add products to the cart.", - comment: "Quaternary bullet point in the barcode info modal in POS, instructing to scan barcodes on item list to add to cart" - ) - static let barcodeInfoQuinaryMessage = NSLocalizedString( - "pos.barcodeInfoModal.quinaryMessage", - value: "The scanner emulates a keyboard, so sometimes it will prevent the software keyboard from showing, e.g. in search. " + - "Tap on the keyboard icon to show it again.", - comment: "Quinary message in the barcode info modal in POS, explaining scanner keyboard emulation and how to show software keyboard again" - ) - - // Accessibility-friendly versions without bullet points - static let barcodeInfoPrimaryMessageAccessible = NSLocalizedString( - "pos.barcodeInfoModal.primaryMessage.accessible", - value: "First: Set up barcodes in the \"G-T-I-N, U-P-C, E-A-N, I-S-B-N\" field by navigating to Products, then Product Details, then Inventory.", - comment: "Accessible version of primary bullet point in barcode info modal, without bullet character for screen readers" - ) - static let barcodeInfoSecondaryMessageAccessible = NSLocalizedString( - "pos.barcodeInfoModal.secondaryMessage.accessible.2", - value: "Second: Refer to your Bluetooth barcode scanner's instructions to set H-I-D mode. This usually " + - "requires scanning a special barcode in the manual.", - comment: "Accessible version of secondary bullet point in barcode info modal, without bullet character for screen readers" - ) - static let barcodeInfoTertiaryMessageAccessible = NSLocalizedString( - "pos.barcodeInfoModal.tertiaryMessage.accessible", - value: "Third: Connect your barcode scanner in iOS Bluetooth settings.", - comment: "Accessible version of tertiary bullet point in barcode info modal, without bullet character for screen readers" - ) - static let barcodeInfoQuaternaryMessageAccessible = NSLocalizedString( - "pos.barcodeInfoModal.quaternaryMessage.accessible", - value: "Fourth: Scan barcodes while on the item list to add products to the cart.", - comment: "Accessible version of quaternary bullet point in barcode info modal, without bullet character for screen readers" - ) + 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/") +} + +private enum Localization { + static let barcodeInfoHeading = NSLocalizedString( + "pos.barcodeInfoModal.heading", + value: "Barcode scanning", + 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", + value: "You can scan barcodes using an external scanner to quickly build a cart.", + comment: "Introductory message in the barcode info modal in POS, explaining the use of external barcode scanners" + ) + static let barcodeInfoPrimaryMessage = NSLocalizedString( + "pos.barcodeInfoModal.primaryMessage", + value: "• Set up barcodes in the \"GTIN, UPC, EAN, ISBN\" field in Products > Product Details > Inventory. ", + comment: "Primary bullet point in the barcode info modal in POS, instructing where to set up barcodes in product details" + ) + static let barcodeInfoMoreDetailsLink = NSLocalizedString( + "pos.barcodeInfoModal.moreDetailsLink", + value: "More details.", + comment: "Link text in the barcode info modal in POS, leading to more details about barcode setup" + ) + static let barcodeInfoMoreDetailsLinkAccessible = NSLocalizedString( + "pos.barcodeInfoModal.moreDetailsLink.accessible", + value: "More details, link.", + comment: "Accessible version of more details link in barcode info modal, announcing it as a link for screen readers" + ) + static let barcodeInfoSecondaryMessage = NSLocalizedString( + "pos.barcodeInfoModal.secondaryMessage.2", + value: "• Refer to your Bluetooth barcode scanner's instructions to set HID mode. This usually " + + "requires scanning a special barcode in the manual.", + comment: "Secondary bullet point in the barcode info modal in POS, instructing to set scanner to HID mode" + ) + static let barcodeInfoTertiaryMessage = NSLocalizedString( + "pos.barcodeInfoModal.tertiaryMessage", + value: "• Connect your barcode scanner in iOS Bluetooth settings.", + comment: "Tertiary bullet point in the barcode info modal in POS, instructing to connect scanner via Bluetooth settings" + ) + static let barcodeInfoQuaternaryMessage = NSLocalizedString( + "pos.barcodeInfoModal.quaternaryMessage", + value: "• Scan barcodes while on the item list to add products to the cart.", + comment: "Quaternary bullet point in the barcode info modal in POS, instructing to scan barcodes on item list to add to cart" + ) + static let barcodeInfoQuinaryMessage = NSLocalizedString( + "pos.barcodeInfoModal.quinaryMessage", + value: "The scanner emulates a keyboard, so sometimes it will prevent the software keyboard from showing, e.g. in search. " + + "Tap on the keyboard icon to show it again.", + comment: "Quinary message in the barcode info modal in POS, explaining scanner keyboard emulation and how to show software keyboard again" + ) + + // Accessibility-friendly versions without bullet points + static let barcodeInfoPrimaryMessageAccessible = NSLocalizedString( + "pos.barcodeInfoModal.primaryMessage.accessible", + value: "First: Set up barcodes in the \"G-T-I-N, U-P-C, E-A-N, I-S-B-N\" field by navigating to Products, then Product Details, then Inventory.", + comment: "Accessible version of primary bullet point in barcode info modal, without bullet character for screen readers" + ) + static let barcodeInfoSecondaryMessageAccessible = NSLocalizedString( + "pos.barcodeInfoModal.secondaryMessage.accessible.2", + value: "Second: Refer to your Bluetooth barcode scanner's instructions to set H-I-D mode. This usually " + + "requires scanning a special barcode in the manual.", + comment: "Accessible version of secondary bullet point in barcode info modal, without bullet character for screen readers" + ) + static let barcodeInfoTertiaryMessageAccessible = NSLocalizedString( + "pos.barcodeInfoModal.tertiaryMessage.accessible", + value: "Third: Connect your barcode scanner in iOS Bluetooth settings.", + comment: "Accessible version of tertiary bullet point in barcode info modal, without bullet character for screen readers" + ) + static let barcodeInfoQuaternaryMessageAccessible = NSLocalizedString( + "pos.barcodeInfoModal.quaternaryMessage.accessible", + value: "Fourth: Scan barcodes while on the item list to add products to the cart.", + comment: "Accessible version of quaternary bullet point in barcode info modal, without bullet character for screen readers" + ) +} + @available(iOS 17.0, *) #Preview { PointOfSaleBarcodeScannerInformationModal(isPresented: .constant(true)) diff --git a/WooCommerce/Resources/Images.xcassets/POS/barcode-field-screenshot.imageset/Contents.json b/WooCommerce/Resources/Images.xcassets/POS/barcode-field-screenshot.imageset/Contents.json new file mode 100644 index 00000000000..6593e4c7ddf --- /dev/null +++ b/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 + } +} diff --git a/WooCommerce/Resources/Images.xcassets/POS/barcode-field-screenshot.imageset/barcode-field-screenshot.pdf b/WooCommerce/Resources/Images.xcassets/POS/barcode-field-screenshot.imageset/barcode-field-screenshot.pdf new file mode 100644 index 00000000000..49ca15edca0 Binary files /dev/null and b/WooCommerce/Resources/Images.xcassets/POS/barcode-field-screenshot.imageset/barcode-field-screenshot.pdf differ