Add basic success view

Author: joshheald

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift

@@ -106,8 +106,12 @@ class PointOfSaleBarcodeScannerSetupFlow {
                         )
                     },
                     buttonCustomization: PointOfSaleBarcodeScannerBackOnlyButtonCustomization()
-                )
-                // TODO: Add more steps for Star BSH-20B WOOMOB-696
+                ),
+                PointOfSaleBarcodeScannerSetupStep(
+                    content: {
+                        PointOfSaleBarcodeScannerSetupCompleteView()
+                    })
+                // TODO: Add optional error step and documentation step for Star BSH-20B WOOMOB-696
             ]
         case .tbcScanner:
             return [

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupStepViews.swift

@@ -112,6 +112,50 @@ private extension PointOfSaleBarcodeScannerTestBarcodeView {
     }
 }
 
+struct PointOfSaleBarcodeScannerSetupCompleteView: View {
+    var body: some View {
+        VStack(spacing: POSSpacing.xLarge) {
+            // Temporary image until finalised assets are available
+            successIcon
+                .accessibilityHidden(true)
+
+            VStack(alignment: .center, spacing: POSSpacing.small) {
+                Text(Localization.title)
+                    .font(.posHeadingBold)
+                    .foregroundColor(.posOnSurface)
+                    .accessibilityAddTraits(.isHeader)
+
+                Text(Localization.instruction)
+                    .font(.posBodyMediumRegular())
+                    .foregroundColor(.posOnSurfaceVariantHighest)
+                    .multilineTextAlignment(.center)
+            }
+        }
+    }
+
+    @ViewBuilder private var successIcon: some View {
+        ZStack {
+            Circle()
+                .frame(width: 104, height: 104)
+                .foregroundColor(.posSuccess)
+            Image(PointOfSaleAssets.successCheck.imageName)
+                .renderingMode(.template)
+                .resizable()
+                .frame(width: 48, height: 48)
+                .foregroundColor(.posOnSuccess)
+        }
+    }
+}
+
+private extension PointOfSaleBarcodeScannerSetupCompleteView {
+    enum Localization {
+        //TODO: WOOMOB-792
+        static let title = "Scanner set up!"
+        static let instruction = "You are ready to start scanning products. \n" +
+        "Read more about barcode and QR code scanner support."
+    }
+}
+
 // MARK: - Button Customizations
 @available(iOS 17.0, *)
 struct PointOfSaleBarcodeScannerWelcomeButtonCustomization: PointOfSaleBarcodeScannerButtonCustomization {

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

@@ -101,7 +101,7 @@ struct PointOfSalePaymentSuccessView: View {
             Image(PointOfSaleAssets.successCheck.imageName)
                 .renderingMode(.template)
                 .foregroundColor(checkmarkColor)
-                .frame(width: 52)
+                .frame(width: Constants.checkmarkSize)
                 .accessibilityHidden(true)
         }
     }
@@ -116,7 +116,7 @@ private extension PointOfSalePaymentSuccessView {
     enum Constants {
         static let imageName: String = "checkmark"
         static let imageSize: CGSize = .init(width: 165, height: 165)
-        static let checkmarkSize: CGFloat = 56
+        static let checkmarkSize: CGFloat = 52
         static let shadowOpacity: CGFloat = 0.16
         static let shadowRadius: CGFloat = 16
         static let shadowSize: CGSize = .init(width: 0, height: 8)