[Woo POS] Finalise design of payment success screen for pos demo build

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

@@ -3,9 +3,12 @@ import SwiftUI
 struct PointOfSaleCardPresentPaymentSuccessMessageView: View {
     let viewModel: PointOfSaleCardPresentPaymentSuccessMessageViewModel
     let animation: POSCardPresentPaymentInLineMessageAnimation
+    @Environment(\.colorScheme) var colorScheme
 
     var body: some View {
         VStack(alignment: .center, spacing: Constants.headerSpacing) {
+            successIcon
+                .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
             VStack(alignment: .center, spacing: Constants.textSpacing) {
                 Text(viewModel.title)
                     .font(.posTitleEmphasized)
@@ -23,10 +26,39 @@ struct PointOfSaleCardPresentPaymentSuccessMessageView: View {
         }
         .multilineTextAlignment(.center)
     }
+
+    private var successIcon: some View {
+        ZStack {
+            Circle()
+                .frame(width: Constants.imageSize.width, height: Constants.imageSize.height)
+                .shadow(color: Color(.wooCommerceEmerald(.shade80)).opacity(Constants.shadowOpacity),
+                        radius: Constants.shadowRadius, x: Constants.shadowSize.width, y: Constants.shadowSize.height)
+                .foregroundColor(circleBackgroundColor)
+            Image(PointOfSaleAssets.successCheck.imageName)
+                .renderingMode(.template)
+                .foregroundColor(checkmarkColor)
+                .frame(width: 52)
+                .accessibilityHidden(true)
+        }
+    }
+
+    private var circleBackgroundColor: Color {
+        Color(red: 8/255, green: 251/255, blue: 135/255)
+    }
+
+    private var checkmarkColor: Color {
+        Color.posSecondaryBackground
+    }
 }
 
 private extension PointOfSaleCardPresentPaymentSuccessMessageView {
     enum Constants {
+        static let imageName: String = "checkmark"
+        static let imageSize: CGSize = .init(width: 165, height: 165)
+        static let checkmarkSize: CGFloat = 56
+        static let shadowOpacity: CGFloat = 0.16
+        static let shadowRadius: CGFloat = 16
+        static let shadowSize: CGSize = .init(width: 0, height: 8)
         static let headerSpacing: CGFloat = 56
         static let textSpacing: CGFloat = 16
     }

WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift

@@ -10,6 +10,7 @@ enum PointOfSaleAssets: CaseIterable {
     case readerConnectionLowBattery
     case readerConnectionSuccess
     case shoppingBags
+    case successCheck
 
     var imageName: String {
         switch self {
@@ -31,6 +32,8 @@ enum PointOfSaleAssets: CaseIterable {
             "pos-reader-connection-complete"
         case .shoppingBags:
             "shopping-bags"
+        case .successCheck:
+            "pos-success-check"
         }
     }
 }

WooCommerce/Classes/POS/Presentation/TotalsView.swift

@@ -76,7 +76,7 @@ struct TotalsView: View {
     private var backgroundColor: Color {
         switch viewModel.paymentState {
         case .cardPaymentSuccessful:
-            colorScheme == .light ? Color(.wooCommerceEmerald(.shade20)) : Color(red: 0/255, green: 81/255, blue: 57/255)
+            .posSecondaryBackground
         case .processingPayment:
             colorScheme == .light ? Color(.wooCommercePurple(.shade70)) : Color(.wooCommercePurple(.shade10))
         default:
@@ -195,9 +195,6 @@ private extension TotalsView {
             viewModel.startNewOrder()
         }, label: {
             HStack(spacing: Constants.newOrderButtonSpacing) {
-                Image(systemName: Constants.newOrderImageName)
-                    .font(.body.bold())
-                    .aspectRatio(contentMode: .fit)
                 Text(Localization.newOrder)
                     .font(Constants.newOrderButtonFont)
             }
@@ -322,12 +319,11 @@ private extension TotalsView {
         static let subtotalsShimmeringHeight: CGFloat = 36
         static let totalShimmeringHeight: CGFloat = 40
 
-        static let paymentsButtonSpacing: CGFloat = 52
+        static let paymentsButtonSpacing: CGFloat = 80
         static let paymentsButtonButtonSpacingAnimationDelay: CGFloat = 0.3
         static let newOrderButtonSpacing: CGFloat = 12
-        static let newOrderButtonPadding: CGFloat = 22
+        static let newOrderButtonPadding: CGFloat = 32
         static let newOrderButtonFont: POSFontStyle = .posBodyEmphasized
-        static let newOrderImageName: String = "arrow.uturn.backward"
 
         /// Used for synchronizing animations of shimmeringLine and textField
         static let matchedGeometrySubtotalId: String = "pos_totals_view_subtotal_matched_geometry_id"

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift

@@ -719,7 +719,8 @@ extension HubMenuViewModel {
             comment: "Title of the POS menu in the hub menu")
 
         static let posDescription = NSLocalizedString(
-            "Use the app as a cash register",
+            "hubMenu.pointOfSale.description",
+            value: "Accept payments at your physical store",
             comment: "Description of the POS menu in the hub menu")
 
         static let woocommerceAdmin = NSLocalizedString(

WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "pos-success-check.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}