Replace buttons in payment success view to use POSButtonStyle. Achieve 0.5 width with GeometryReader.

Author: jaclync

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

@@ -42,10 +42,14 @@ struct PointOfSalePaymentSuccessView: View {
                             }
                         }
 
-                        PaymentsActionButtons(isShowingSendReceiptView: $isShowingSendReceiptView,
-                                           isShowingReceiptNotEligibleBanner: $isShowingReceiptNotEligibleBanner)
-                            .offset(y: isViewLoaded ? 0 : -Constants.animationOffset)
-                            .opacity(isViewLoaded ? 1 : 0)
+                        GeometryReader { geometry in
+                            PaymentsActionButtons(isShowingSendReceiptView: $isShowingSendReceiptView,
+                                               isShowingReceiptNotEligibleBanner: $isShowingReceiptNotEligibleBanner)
+                                .frame(width: geometry.size.width / 2)
+                                .frame(maxWidth: .infinity, alignment: .center)
+                                .offset(y: isViewLoaded ? 0 : -Constants.animationOffset)
+                                .opacity(isViewLoaded ? 1 : 0)
+                        }
                     }
                     .multilineTextAlignment(.center)
 
@@ -104,10 +108,17 @@ private extension PointOfSalePaymentSuccessView {
     }
 }
 
+#if DEBUG
 @available(iOS 17.0, *)
 #Preview {
+    let posModel = PointOfSaleAggregateModel(
+        itemsController: PointOfSalePreviewItemsController(),
+        cardPresentPaymentService: CardPresentPaymentPreviewService(),
+        orderController: PointOfSalePreviewOrderController())
     return PointOfSalePaymentSuccessView(
         viewModel: PointOfSalePaymentSuccessViewModel(formattedOrderTotal: "$3.00",
                                                       paymentMethod: .card)
     )
+    .environment(posModel)
 }
+#endif

WooCommerce/Classes/POS/Presentation/PaymentButtons.swift

@@ -36,15 +36,8 @@ private extension PaymentsActionButtons {
                 Text(Localization.sendReceipt)
                     .font(Constants.buttonFont)
             }
-            .frame(minWidth: UIScreen.main.bounds.width / 2)
         })
-        .padding(Constants.buttonPadding)
-        .foregroundColor(Color.posPrimaryText)
-        .background(Color.clear)
-        .overlay {
-            RoundedRectangle(cornerRadius: Constants.buttonCornerRadius)
-                        .stroke(Color.posPrimaryText, lineWidth: 1.0)
-        }
+        .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
     }
 
     var newOrderButton: some View {
@@ -56,12 +49,8 @@ private extension PaymentsActionButtons {
                 Text(Localization.newOrder)
                     .font(Constants.buttonFont)
             }
-            .frame(minWidth: UIScreen.main.bounds.width / 2)
         })
-        .padding(Constants.buttonPadding)
-        .foregroundColor(Color.posOnInverseSurface)
-        .background(Color.posPrimaryButtonBackground)
-        .cornerRadius(Constants.buttonCornerRadius)
+        .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
     }
 }
 
@@ -89,9 +78,7 @@ private extension PaymentsActionButtons {
 private extension PaymentsActionButtons {
     enum Constants {
         static let buttonSpacing: CGFloat = 12
-        static let buttonPadding: CGFloat = 32
         static let buttonFont: POSFontStyle = .posBodyEmphasized
-        static let buttonCornerRadius: CGFloat = 8
     }
 
     enum Localization {