diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift index a7e0fe33176..3004f32bd72 100644 --- a/WooCommerce/Classes/POS/Presentation/CartView.swift +++ b/WooCommerce/Classes/POS/Presentation/CartView.swift @@ -25,6 +25,12 @@ struct CartView: View { posModel.cart.coupons.isNotEmpty } + private var isPOSSettingsEnabled: Bool { + ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleSettingsi1) + } + + @State private var showBarcodeScanningModal: Bool = false + var body: some View { ZStack { VStack(spacing: 0) { @@ -69,6 +75,9 @@ struct CartView: View { .zIndex(1) } } + .posModal(isPresented: $showBarcodeScanningModal) { + PointOfSaleBarcodeScannerSetup(isPresented: $showBarcodeScanningModal) + } .animation(Constants.cartAnimation, value: posModel.cart.isEmpty) .frame(maxWidth: .infinity) .background(content: { @@ -126,6 +135,11 @@ private extension CartView { private extension CartView { enum Localization { + static let barcodeScanningSetup = NSLocalizedString( + "pos.cartView.cartTitle.barcodeScanningSetup.button", + value: "Scan barcode", + comment: "The title of the menu button to start a barcode scanner setup flow." + ) static let cartTitle = NSLocalizedString( "pos.cartView.cartTitle", value: "Cart", @@ -134,6 +148,10 @@ private extension CartView { "pos.cartView.addItemsToCartHint", value: "Tap on a product to \n add it to the cart", comment: "Hint to add products to the Cart when this is empty.") + static let addItemsToCartOrScanHint = NSLocalizedString( + "pos.cartView.addItemsToCartOrScanHint", + value: "Tap on a product to \n add it to the cart, or ", + comment: "Hint to add products to the Cart when this is empty.") static let checkoutButtonTitle = NSLocalizedString( "pos.cartView.checkoutButtonTitle", value: "Check out", @@ -191,7 +209,7 @@ private extension CartView { // SwiftUI doesn't allow us to absolutely pin a view to the centre then position other views relative to it // Instead, we can centre the text, and then put the image in an offset overlay. Offsetting from the top // avoids issues when the text size is changed through dynamic type. - Text(Localization.addItemsToCartHint) + Text(isPOSSettingsEnabled ? Localization.addItemsToCartOrScanHint : Localization.addItemsToCartHint) .font(Constants.secondaryFont) .foregroundColor(Color.posOnSurfaceVariantLowest) .multilineTextAlignment(.center) @@ -202,6 +220,18 @@ private extension CartView { .offset(y: -(Constants.shoppingBagImageSize + Constants.emptyViewImageTextSpacing)) .aspectRatio(contentMode: .fit) } + if isPOSSettingsEnabled { + Button(action: { + showBarcodeScanningModal = true + }, label: { + HStack { + Text(Localization.barcodeScanningSetup) + .font(Constants.secondaryFont) + .foregroundColor(Color.posOnSurfaceVariantLowest) + Image(systemName: "barcode.viewfinder") + } + }) + } Spacer() } .background(backgroundColor.ignoresSafeArea(.all)) diff --git a/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift b/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift index a27a0078d6c..a2f7b01ca95 100644 --- a/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift +++ b/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift @@ -22,74 +22,17 @@ struct POSFloatingControlView: View { self._showSettings = showSettings } + private var isPOSSettingsEnabled: Bool { + ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleSettingsi1) + } + var body: some View { HStack { Menu { - Button { - ServiceLocator.analytics.track(.pointOfSaleExitMenuItemTapped) - showExitPOSModal = true - } label: { - Label( - title: { Text(Localization.exitPointOfSale) }, - icon: { Image(systemName: "rectangle.portrait.and.arrow.forward") } - ) - } - Button { - ServiceLocator.analytics.track(.pointOfSaleGetSupportTapped) - showSupport = true - } label: { - Label( - title: { Text(Localization.getSupport) }, - icon: { Image(systemName: "questionmark.circle") } - ) - } - Button { - showDocumentation = true - ServiceLocator.analytics.track(.pointOfSaleViewDocsTapped) - } label: { - Label( - title: { Text(Localization.viewDocumentation) }, - icon: { Image(systemName: "info.circle") } - ) - } - Button { - showProductRestrictionsModal = true - ServiceLocator.analytics.track(.pointOfSaleSimpleProductsExplanationDialogShown) - } label: { - Label( - title: { Text(Localization.productRestrictionsInfo) }, - icon: { Image(systemName: "magnifyingglass") }) - } - Button { - showBarcodeScanningModal = true - ServiceLocator.analytics.track(.pointOfSaleBarcodeScanningMenuItemTapped) - } label: { - Label( - title: { - Text(Localization.barcodeScanningSetup) - }, - icon: { Image(systemName: "barcode.viewfinder") }) - } - if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleSettingsi1) { - Button { - showSettings = true - } label: { - Label( - title: { Text(Localization.settings) }, - icon: { Image(systemName: "gearshape") } - ) - } - } - - if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleHistoricalOrdersi1) { - Button { - showOrders = true - } label: { - Label( - title: { Text(Localization.orders) }, - icon: { Image(systemName: "text.document") } - ) - } + if isPOSSettingsEnabled { + compactOptions() + } else { + completeOptions() } } label: { VStack { @@ -129,6 +72,110 @@ struct POSFloatingControlView: View { } } +private extension POSFloatingControlView { + @ViewBuilder private func compactOptions() -> some View { + Button { + ServiceLocator.analytics.track(.pointOfSaleExitMenuItemTapped) + showExitPOSModal = true + } label: { + Label( + title: { Text(Localization.exitPointOfSale) }, + icon: { Image(systemName: "rectangle.portrait.and.arrow.forward") } + ) + } + if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleSettingsi1) { + Button { + showSettings = true + } label: { + Label( + title: { Text(Localization.settings) }, + icon: { Image(systemName: "gearshape") } + ) + } + } + + if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleHistoricalOrdersi1) { + Button { + showOrders = true + } label: { + Label( + title: { Text(Localization.orders) }, + icon: { Image(systemName: "text.document") } + ) + } + } + } + + @ViewBuilder private func completeOptions() -> some View { + Button { + ServiceLocator.analytics.track(.pointOfSaleExitMenuItemTapped) + showExitPOSModal = true + } label: { + Label( + title: { Text(Localization.exitPointOfSale) }, + icon: { Image(systemName: "rectangle.portrait.and.arrow.forward") } + ) + } + Button { + ServiceLocator.analytics.track(.pointOfSaleGetSupportTapped) + showSupport = true + } label: { + Label( + title: { Text(Localization.getSupport) }, + icon: { Image(systemName: "questionmark.circle") } + ) + } + Button { + showDocumentation = true + ServiceLocator.analytics.track(.pointOfSaleViewDocsTapped) + } label: { + Label( + title: { Text(Localization.viewDocumentation) }, + icon: { Image(systemName: "info.circle") } + ) + } + Button { + showProductRestrictionsModal = true + ServiceLocator.analytics.track(.pointOfSaleSimpleProductsExplanationDialogShown) + } label: { + Label( + title: { Text(Localization.productRestrictionsInfo) }, + icon: { Image(systemName: "magnifyingglass") }) + } + Button { + showBarcodeScanningModal = true + ServiceLocator.analytics.track(.pointOfSaleBarcodeScanningMenuItemTapped) + } label: { + Label( + title: { + Text(Localization.barcodeScanningSetup) + }, + icon: { Image(systemName: "barcode.viewfinder") }) + } + if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleSettingsi1) { + Button { + showSettings = true + } label: { + Label( + title: { Text(Localization.settings) }, + icon: { Image(systemName: "gearshape") } + ) + } + } + + if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleHistoricalOrdersi1) { + Button { + showOrders = true + } label: { + Label( + title: { Text(Localization.orders) }, + icon: { Image(systemName: "text.document") } + ) + } + } + } +} + private extension POSFloatingControlView { var backgroundColor: Color { switch backgroundAppearance {