[Woo POS] Centring of views (#13789)

Author: joshheald

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListEmptyView.swift

@@ -2,28 +2,27 @@ import SwiftUI
 
 struct PointOfSaleItemListEmptyView: View {
     var body: some View {
-        VStack(alignment: .center, spacing: PointOfSaleItemListErrorLayout.headerSpacing) {
-            POSHeaderTitleView(foregroundColor: .posSecondaryText)
-            Spacer()
-            Image(systemName: Constants.iconSystemName)
-                .resizable()
-                .aspectRatio(contentMode: .fit)
-                .frame(width: Constants.iconSize, height: Constants.iconSize)
-                .foregroundColor(.posSecondaryText)
-                .scaleEffect(x: -1, y: 1)
-                .accessibilityHidden(true)
-            Text(Localization.emptyProductsTitle)
-                .foregroundStyle(Color.posSecondaryText)
-                .font(.posTitleEmphasized)
-            Text(Localization.emptyProductsSubtitle)
-                .foregroundStyle(Color.posSecondaryText)
-                .font(.posBodyRegular)
-                .padding([.leading, .trailing])
-            Text(Localization.emptyProductsHint)
-                .foregroundStyle(Color.posSecondaryText)
-                .font(.posBodyRegular)
-                .padding([.leading, .trailing])
-            Spacer()
+        PointOfSaleItemListFullscreenView {
+            VStack(alignment: .center, spacing: PointOfSaleItemListErrorLayout.headerSpacing) {
+                Spacer()
+                Image(decorative: PointOfSaleAssets.magnifierNotFound.imageName)
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: Constants.iconSize, height: Constants.iconSize)
+                    .foregroundColor(.posSecondaryText)
+                Text(Localization.emptyProductsTitle)
+                    .foregroundStyle(Color.posSecondaryText)
+                    .font(.posTitleEmphasized)
+                Text(Localization.emptyProductsSubtitle)
+                    .foregroundStyle(Color.posSecondaryText)
+                    .font(.posBodyRegular)
+                    .padding([.leading, .trailing])
+                Text(Localization.emptyProductsHint)
+                    .foregroundStyle(Color.posSecondaryText)
+                    .font(.posBodyRegular)
+                    .padding([.leading, .trailing])
+                Spacer()
+            }
         }
     }
 }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorView.swift

@@ -10,30 +10,32 @@ struct PointOfSaleItemListErrorView: View {
     }
 
     var body: some View {
-        VStack(alignment: .center, spacing: PointOfSaleItemListErrorLayout.headerSpacing) {
-            POSHeaderTitleView(foregroundColor: .posSecondaryText)
-            Spacer()
-            VStack(alignment: .center) {
-                POSErrorExclamationMark()
-                    .padding(.bottom)
-                Text(error.title)
-                    .foregroundStyle(Color.posPrimaryText)
-                    .font(.posTitleEmphasized)
-                    .padding(.bottom, PointOfSaleItemListErrorLayout.verticalPadding)
-                Text(error.subtitle)
-                    .foregroundStyle(Color.posPrimaryText)
-                    .font(.posBodyRegular)
-                    .padding([.leading, .trailing])
-                    .padding(.bottom, PointOfSaleItemListErrorLayout.verticalPadding)
-                Button(action: {
-                    onRetry?()
-                }, label: {
-                    Text(error.buttonText)
-                })
-                .buttonStyle(POSPrimaryButtonStyle())
-                .frame(width: PointOfSaleItemListErrorLayout.buttonWidth)
+        PointOfSaleItemListFullscreenView {
+            VStack {
+                Spacer()
+                VStack(alignment: .center) {
+                    POSErrorExclamationMark()
+                        .padding(.bottom)
+                    Text(error.title)
+                        .accessibilityAddTraits(.isHeader)
+                        .foregroundStyle(Color.posPrimaryText)
+                        .font(.posTitleEmphasized)
+                        .padding(.bottom, PointOfSaleItemListErrorLayout.verticalPadding)
+                    Text(error.subtitle)
+                        .foregroundStyle(Color.posPrimaryText)
+                        .font(.posBodyRegular)
+                        .padding([.leading, .trailing])
+                        .padding(.bottom, PointOfSaleItemListErrorLayout.verticalPadding)
+                    Button(action: {
+                        onRetry?()
+                    }, label: {
+                        Text(error.buttonText)
+                    })
+                    .buttonStyle(POSPrimaryButtonStyle())
+                    .frame(width: PointOfSaleItemListErrorLayout.buttonWidth)
+                }
+                Spacer()
             }
-            Spacer()
         }
     }
 }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListFullscreenView.swift

@@ -0,0 +1,25 @@
+import SwiftUI
+
+struct PointOfSaleItemListFullscreenView<Content: View>: View {
+    let content: () -> Content
+
+    var body: some View {
+        ZStack {
+            VStack(alignment: .center, spacing: PointOfSaleItemListErrorLayout.headerSpacing) {
+                POSHeaderTitleView(foregroundColor: .posSecondaryText)
+                Spacer()
+            }
+
+            content()
+                .zIndex(1)
+        }
+    }
+}
+
+#Preview {
+    PointOfSaleItemListFullscreenView(
+        content: {
+            PointOfSaleItemListErrorView(
+                error: .init(title: "Error", subtitle: "Something went wrong", buttonText: "Fix it"))
+        })
+}

WooCommerce/Classes/POS/Presentation/CartView.swift

@@ -69,20 +69,7 @@ struct CartView: View {
             .padding(.vertical, POSHeaderLayoutConstants.sectionVerticalPadding)
             .if(shouldApplyHeaderBottomShadow, transform: { $0.applyBottomShadow() })
 
-            if cartViewModel.isCartEmpty {
-                VStack(spacing: Constants.cartEmptyViewSpacing) {
-                    Spacer()
-                    Image(decorative: PointOfSaleAssets.shoppingBags.imageName)
-                        .resizable()
-                        .frame(width: Constants.shoppingBagImageSize, height: Constants.shoppingBagImageSize)
-                        .aspectRatio(contentMode: .fit)
-                    Text(Localization.addItemsToCartHint)
-                        .font(Constants.secondaryFont)
-                        .foregroundColor(Color.posTertiaryText)
-                        .multilineTextAlignment(.center)
-                    Spacer()
-                }
-            } else {
+            if !cartViewModel.isCartEmpty {
                 ScrollViewReader { proxy in
                     ScrollView {
                         VStack(spacing: 0) {
@@ -133,6 +120,11 @@ struct CartView: View {
         }
         .animation(Constants.cartAnimation, value: cartViewModel.isCartEmpty)
         .frame(maxWidth: .infinity)
+        .background(content: {
+            if cartViewModel.isCartEmpty {
+                cartEmptyView
+            }
+        })
         .background(backgroundColor.ignoresSafeArea(.all))
         .accessibilityElement(children: .contain)
     }
@@ -161,6 +153,7 @@ private extension CartView {
     enum Constants {
         static let primaryFont: POSFontStyle = .posTitleEmphasized
         static let secondaryFont: POSFontStyle = .posBodyRegular
+        static let cartEmptyViewTextLineHeight: CGFloat = 12
         static let itemsFont: POSFontStyle = .posDetailRegular
         static let clearButtonFont: POSFontStyle = .posDetailEmphasized
         static let clearButtonCornerRadius: CGFloat = 4
@@ -169,7 +162,7 @@ private extension CartView {
         static let itemHorizontalPadding: CGFloat = 8
         static let shoppingBagImageSize: CGFloat = 104
         static let scrollViewCoordinateSpaceIdentifier: String = "CartScrollView"
-        static let cartEmptyViewSpacing: CGFloat = 40
+        static let emptyViewImageTextSpacing: CGFloat = 30 // This should be 40 by designs, but the overlay technique means we have to tweak it
         static let cartHeaderSpacing: CGFloat = 8
         static let backButtonSymbol: String = "chevron.backward"
         static let cartHeaderElementSpacing: CGFloat = 16
@@ -224,6 +217,30 @@ private extension CartView {
             }
         }
     }
+
+    var cartEmptyView: some View {
+        VStack {
+            Spacer()
+            // By designs, the text should be vertically centred with the image 40px above it.
+            // 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)
+                .font(Constants.secondaryFont)
+                .lineSpacing(Constants.cartEmptyViewTextLineHeight)
+                .foregroundColor(Color.posTertiaryText)
+                .multilineTextAlignment(.center)
+                .overlay(alignment: .top) {
+                    Image(decorative: PointOfSaleAssets.shoppingBags.imageName)
+                        .resizable()
+                        .frame(width: Constants.shoppingBagImageSize, height: Constants.shoppingBagImageSize, alignment: .bottom)
+                        .offset(y: -(Constants.shoppingBagImageSize + Constants.emptyViewImageTextSpacing))
+                        .aspectRatio(contentMode: .fit)
+                }
+            Spacer()
+        }
+        .background(backgroundColor.ignoresSafeArea(.all))
+    }
 }
 
 #if DEBUG

WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift

@@ -1,6 +1,7 @@
 import Foundation
 
 enum PointOfSaleAssets: CaseIterable {
+    case magnifierNotFound
     case readyForPayment
     case readerConnectionScanning
     case readerConnectionDoYouWantToConnect
@@ -12,6 +13,8 @@ enum PointOfSaleAssets: CaseIterable {
 
     var imageName: String {
         switch self {
+        case .magnifierNotFound:
+            "pos-magnifier-not-found"
         case .readyForPayment:
             "pos-ready-for-payment"
         case .readerConnectionScanning:

WooCommerce/Classes/POS/Presentation/TotalsView.swift

@@ -267,15 +267,31 @@ private extension TotalsView {
             topPadding: 40,
             bottomPadding: 40
         )
+
+        static let topAligned = CardReaderViewLayout(
+            backgroundColor: .clear,
+            topPadding: 96,
+            bottomPadding: 96
+        )
     }
 
     private var cardReaderViewLayout: CardReaderViewLayout {
         guard viewModel.isShowingCardReaderStatus else {
             return .primary
         }
 
-        if viewModel.paymentState == .validatingOrderError {
+        switch viewModel.paymentState {
+        case .validatingOrderError:
             return .outlined
+        case .paymentError:
+            return .topAligned
+        case .idle,
+                .acceptingCard,
+                .validatingOrder,
+                .preparingReader,
+                .processingPayment,
+                .cardPaymentSuccessful:
+            break
         }
 
         if viewModel.connectionStatus == .disconnected {

WooCommerce/Resources/Images.xcassets/POS/pos-magnifier-not-found.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "pos-magnifier-not-found.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

WooCommerce/Resources/Images.xcassets/POS/pos-magnifier-not-found.imageset/pos-magnifier-not-found.pdf

@@ -741,6 +741,7 @@
 		174CA86A27D90A6200126524 /* AutomatticAbout in Frameworks */ = {isa = PBXBuildFile; productRef = 174CA86927D90A6200126524 /* AutomatticAbout */; };
 		174CA86C27D90E8900126524 /* WooAboutScreenConfiguration.swift in Sources */ = {isa = PBXBuildFile; fileRef = 174CA86B27D90E8900126524 /* WooAboutScreenConfiguration.swift */; };
 		174CA86E27DBFD2D00126524 /* ShareAppTextItemActivitySource.swift in Sources */ = {isa = PBXBuildFile; fileRef = 174CA86D27DBFD2D00126524 /* ShareAppTextItemActivitySource.swift */; };
+		200190002C80AEAC002C1E4B /* PointOfSaleItemListFullscreenView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20018FFF2C80AEAC002C1E4B /* PointOfSaleItemListFullscreenView.swift */; };
 		2004E2C22C076CED00D62521 /* CardPresentPaymentFacade.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2004E2C12C076CED00D62521 /* CardPresentPaymentFacade.swift */; };
 		2004E2C42C076D3800D62521 /* CardPresentPaymentEvent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2004E2C32C076D3800D62521 /* CardPresentPaymentEvent.swift */; };
 		2004E2C62C076D4500D62521 /* CardPresentPaymentResult.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2004E2C52C076D4500D62521 /* CardPresentPaymentResult.swift */; };
@@ -843,8 +844,8 @@
 		20CC1EDD2AFA99DF006BD429 /* InPersonPaymentsMenuViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20CC1EDC2AFA99DF006BD429 /* InPersonPaymentsMenuViewModel.swift */; };
 		20CCBF212B0E15C0003102E6 /* WooPaymentsDepositsCurrencyOverviewViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20CCBF202B0E15C0003102E6 /* WooPaymentsDepositsCurrencyOverviewViewModelTests.swift */; };
 		20D210BE2B14C9B90099E517 /* WooPaymentsDepositStatusDisplayDetails.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D210BD2B14C9B90099E517 /* WooPaymentsDepositStatusDisplayDetails.swift */; };
-		20D2CCA52C7E328300051705 /* POSModalCloseButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D2CCA42C7E328300051705 /* POSModalCloseButton.swift */; };
 		20D2CCA32C7E175700051705 /* WavesProgressViewStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D2CCA22C7E175700051705 /* WavesProgressViewStyle.swift */; };
+		20D2CCA52C7E328300051705 /* POSModalCloseButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D2CCA42C7E328300051705 /* POSModalCloseButton.swift */; };
 		20D3D42B2C64D7CC004CE6E3 /* SimpleProductsOnlyInformation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D3D42A2C64D7CC004CE6E3 /* SimpleProductsOnlyInformation.swift */; };
 		20D3D42F2C64F175004CE6E3 /* POSSecondaryButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D3D42E2C64F175004CE6E3 /* POSSecondaryButtonStyle.swift */; };
 		20D3D4312C64F202004CE6E3 /* POSButtonStyleConstants.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20D3D4302C64F202004CE6E3 /* POSButtonStyleConstants.swift */; };
@@ -3784,6 +3785,7 @@
 		09F5DE5C27CF948000E5A4D2 /* BulkUpdateOptionsModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BulkUpdateOptionsModel.swift; sourceTree = "<group>"; };
 		174CA86B27D90E8900126524 /* WooAboutScreenConfiguration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooAboutScreenConfiguration.swift; sourceTree = "<group>"; };
 		174CA86D27DBFD2D00126524 /* ShareAppTextItemActivitySource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppTextItemActivitySource.swift; sourceTree = "<group>"; };
+		20018FFF2C80AEAC002C1E4B /* PointOfSaleItemListFullscreenView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PointOfSaleItemListFullscreenView.swift; sourceTree = "<group>"; };
 		2004E2C12C076CED00D62521 /* CardPresentPaymentFacade.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPresentPaymentFacade.swift; sourceTree = "<group>"; };
 		2004E2C32C076D3800D62521 /* CardPresentPaymentEvent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPresentPaymentEvent.swift; sourceTree = "<group>"; };
 		2004E2C52C076D4500D62521 /* CardPresentPaymentResult.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPresentPaymentResult.swift; sourceTree = "<group>"; };
@@ -3887,8 +3889,8 @@
 		20CC1EDC2AFA99DF006BD429 /* InPersonPaymentsMenuViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InPersonPaymentsMenuViewModel.swift; sourceTree = "<group>"; };
 		20CCBF202B0E15C0003102E6 /* WooPaymentsDepositsCurrencyOverviewViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooPaymentsDepositsCurrencyOverviewViewModelTests.swift; sourceTree = "<group>"; };
 		20D210BD2B14C9B90099E517 /* WooPaymentsDepositStatusDisplayDetails.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooPaymentsDepositStatusDisplayDetails.swift; sourceTree = "<group>"; };
-		20D2CCA42C7E328300051705 /* POSModalCloseButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSModalCloseButton.swift; sourceTree = "<group>"; };
 		20D2CCA22C7E175700051705 /* WavesProgressViewStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WavesProgressViewStyle.swift; sourceTree = "<group>"; };
+		20D2CCA42C7E328300051705 /* POSModalCloseButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSModalCloseButton.swift; sourceTree = "<group>"; };
 		20D3D42A2C64D7CC004CE6E3 /* SimpleProductsOnlyInformation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SimpleProductsOnlyInformation.swift; sourceTree = "<group>"; };
 		20D3D42E2C64F175004CE6E3 /* POSSecondaryButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSSecondaryButtonStyle.swift; sourceTree = "<group>"; };
 		20D3D4302C64F202004CE6E3 /* POSButtonStyleConstants.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSButtonStyleConstants.swift; sourceTree = "<group>"; };
@@ -6757,6 +6759,7 @@
 				2004E2E82C0DFE2B00D62521 /* PointOfSaleCardPresentPaymentAlert.swift */,
 				2023E2AD2C21D8EA00FC365A /* PointOfSaleCardPresentPaymentInLineMessage.swift */,
 				68600A8E2C65BC5500252EDD /* PointOfSaleItemListErrorView.swift */,
+				20018FFF2C80AEAC002C1E4B /* PointOfSaleItemListFullscreenView.swift */,
 				68600A902C65BC9C00252EDD /* PointOfSaleItemListEmptyView.swift */,
 				68C7E5C32C69B3CD00856513 /* PointOfSaleItemListErrorLayout.swift */,
 				205E79492C204B2D001BA266 /* Reader Messages */,
@@ -15550,6 +15553,7 @@
 				2631D4F829ED0B5C00F13F20 /* WPComPlanNameSanitizer.swift in Sources */,
 				CE4296B920A5E9E400B2AFBD /* CNContact+Helpers.swift in Sources */,
 				02A723262AB2E1A6003AEC7E /* GiftCardInputView.swift in Sources */,
+				200190002C80AEAC002C1E4B /* PointOfSaleItemListFullscreenView.swift in Sources */,
 				DE7E5E812B4BCC06002E28D2 /* BlazeTargetLanguagePickerViewModel.swift in Sources */,
 				0230B4D22C333E0800F2F660 /* PointOfSaleCardPresentPaymentCaptureErrorMessageViewModel.swift in Sources */,
 				0211252825773F220075AD2A /* Models+Copiable.generated.swift in Sources */,