[Woo POS][Design System] Reimplement 0.5 width for 4 payment error views

WooCommerce/Classes/POS/Presentation/Card Present Payments/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageViewModel.swift

@@ -5,7 +5,6 @@ final class PointOfSaleCardPresentPaymentCaptureErrorMessageViewModel: Observabl
     let id = UUID()
     let title = Localization.title
     let message = Localization.message
-    let nextStep = Localization.nextStep
     let tryAgainButtonViewModel: CardPresentPaymentsModalButtonViewModel
     let newOrderButtonViewModel: CardPresentPaymentsModalButtonViewModel
 
@@ -29,7 +28,6 @@ final class PointOfSaleCardPresentPaymentCaptureErrorMessageViewModel: Observabl
         lhs.id == rhs.id &&
         lhs.title == rhs.title &&
         lhs.message == rhs.message  &&
-        lhs.nextStep == rhs.nextStep &&
         lhs.tryAgainButtonViewModel == rhs.tryAgainButtonViewModel &&
         lhs.newOrderButtonViewModel == rhs.newOrderButtonViewModel &&
         lhs.showsInfoSheet == rhs.showsInfoSheet
@@ -46,19 +44,14 @@ private extension PointOfSaleCardPresentPaymentCaptureErrorMessageViewModel {
         )
 
         static let message = NSLocalizedString(
-            "pointOfSale.cardPresent.paymentCaptureError.unable.to.confirm.message",
-            value: "Due to a network error, we’re unable to confirm that the payment succeeded.",
+            "pointOfSale.cardPresent.paymentCaptureError.unable.to.confirm.message.1",
+            value: "Due to a network error, we’re unable to confirm that the payment succeeded. " +
+            "Verify payment on a device with a working network connection. If unsuccessful, retry the payment. " +
+            "If successful, start a new order.",
             comment: "Error message. Presented to users after collecting a payment fails from payment capture error " +
             "on the Point of Sale Checkout"
         )
 
-        static let nextStep = NSLocalizedString(
-            "pointOfSale.cardPresent.paymentCaptureError.nextSteps",
-            value: "Verify payment on a device with a working network connection. If unsuccessful, retry the payment. " +
-            "If successful, start a new order.",
-            comment: "Next steps hint for what to do after seeing a payment capture error message. Presented to users " +
-            "after collecting a payment fails from payment capture error on the Point of Sale Checkout")
-
         static let tryPaymentAgain = NSLocalizedString(
             "pointOfSale.cardPresent.paymentCaptureError.tryPaymentAgain.button.title",
             value: "Try payment again",

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift

@@ -26,14 +26,12 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View {
                     .font(.posHeadingBold)
                     .matchedGeometryEffect(id: animation.titleTransitionId, in: animation.namespace, properties: .position)
 
-                VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.textSpacing) {
-                    Text(viewModel.message)
-                    Text(viewModel.nextStep)
-                }
-                .font(.posBodyLargeRegular())
-                .foregroundStyle(Color.posOnSurface)
-                .matchedGeometryEffect(id: animation.messageTransitionId, in: animation.namespace, properties: .position)
+                Text(viewModel.message)
+                    .font(.posBodyLargeRegular())
+                    .foregroundStyle(Color.posOnSurface)
+                    .matchedGeometryEffect(id: animation.messageTransitionId, in: animation.namespace, properties: .position)
             }
+            .frame(width: width * 0.5)
 
             Spacer()
                 .frame(height: PointOfSaleCardPresentPaymentLayout.textAndButtonSpacing)
@@ -48,9 +46,10 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View {
                 }
                 .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             }
+            .frame(width: width * 0.5)
         }
         .multilineTextAlignment(.center)
-        .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .posModal(isPresented: $viewModel.showsInfoSheet) {
             PointOfSaleCardPresentPaymentCaptureFailedView(isPresented: $viewModel.showsInfoSheet)
         }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift

@@ -8,6 +8,8 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: POSSpacing.none) {
+            Spacer()
+
             POSErrorXMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 
@@ -26,6 +28,7 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View {
                     .foregroundStyle(Color.posOnSurface)
                     .matchedGeometryEffect(id: animation.messageTransitionId, in: animation.namespace, properties: .position)
             }
+            .frame(width: width * 0.5)
 
             Spacer()
                 .frame(height: PointOfSaleCardPresentPaymentLayout.textAndButtonSpacing)
@@ -41,9 +44,12 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View {
                     .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
+            .frame(width: width * 0.5)
+
+            Spacer()
         }
         .multilineTextAlignment(.center)
-        .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .measureWidth({ containerWidth in
             width = containerWidth
         })

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift

@@ -41,9 +41,10 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View {
                     .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
+            .frame(width: width * 0.5)
         }
         .multilineTextAlignment(.center)
-        .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .measureWidth({ containerWidth in
             width = containerWidth
         })

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift

@@ -7,5 +7,4 @@ enum PointOfSaleCardPresentPaymentLayout {
     static let textSpacing: CGFloat = POSSpacing.small
     static let buttonSpacing: CGFloat = POSSpacing.large
     static let horizontalPadding: CGFloat = POSPadding.xxLarge
-    static let errorContentMaxWidth: CGFloat = 604
 }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift

@@ -8,6 +8,8 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: POSSpacing.none) {
+            Spacer()
+
             POSErrorXMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 
@@ -29,16 +31,20 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View {
                 .foregroundStyle(Color.posOnSurface)
                 .matchedGeometryEffect(id: animation.messageTransitionId, in: animation.namespace, properties: .position)
             }
+            .frame(width: width * 0.5)
 
             Spacer()
                 .frame(height: PointOfSaleCardPresentPaymentLayout.textAndButtonSpacing)
 
             Button(viewModel.tryAnotherPaymentMethodButtonViewModel.title,
                    action: viewModel.tryAnotherPaymentMethodButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
+            .frame(width: width * 0.5)
+
+            Spacer()
         }
         .multilineTextAlignment(.center)
-        .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .measureWidth({ containerWidth in
             width = containerWidth
         })

WooCommerce/Classes/POS/Presentation/TotalsView.swift

@@ -323,7 +323,10 @@ private extension TotalsView {
             case .validatingOrderError:
                 return .outlined
             case .paymentError:
-                return .topAligned
+                return PaymentViewLayout(backgroundColor: backgroundColor,
+                                         topPadding: POSPadding.none,
+                                         bottomPadding: POSPadding.none,
+                                         sidePadding: POSPadding.none)
             case .cardPaymentSuccessful:
                 return PaymentViewLayout(backgroundColor: backgroundColor,
                                          topPadding: POSPadding.none,

WooCommerce/Classes/POS/ViewHelpers/TotalsViewHelper.swift

@@ -67,7 +67,7 @@ final class TotalsViewHelper {
 
     func shouldApplyPadding(paymentState: PointOfSalePaymentState) -> Bool {
         switch paymentState {
-        case .card(.cardPaymentSuccessful), .cash(.paymentSuccess):
+        case .card(.cardPaymentSuccessful), .cash(.paymentSuccess), .card(.paymentError):
             return false
         default:
             return true

WooCommerce/WooCommerceTests/POS/Card Present Payments/PointOfSaleCardPresentPaymentCaptureErrorMessageViewModelTests.swift

@@ -5,7 +5,7 @@ final class PointOfSaleCardPresentPaymentCaptureErrorMessageViewModelTests: XCTe
     func test_manual_equatable_conformance_number_of_properties_unchanged() {
         let sut = PointOfSaleCardPresentPaymentCaptureErrorMessageViewModel(tryAgainButtonAction: {}, newOrderButtonAction: {})
         XCTAssertPropertyCount(sut,
-                               expectedCount: 7,
+                               expectedCount: 6,
                                messageHint: "Please check that the manual equatable conformance includes new properties.")
     }
 }