Replace usage of image to POSCardPresentPaymentMessageViewImage

Author: staskus

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

@@ -7,11 +7,7 @@ struct PointOfSaleCardPresentPaymentCardInsertedMessageView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: Constants.imageAndTextSpacing) {
-            Image(decorative: viewModel.imageName)
-                .resizable()
-                .aspectRatio(contentMode: .fill)
-                .frame(width: PointOfSaleCardPresentPaymentLayout.headerSize.width,
-                       height: PointOfSaleCardPresentPaymentLayout.headerSize.height)
+            POSCardPresentPaymentMessageViewImage(imageName: viewModel.imageName)
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
                 .renderedIf(!dynamicTypeSize.isAccessibilitySize)
             VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.textSpacing) {

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

@@ -13,7 +13,7 @@ struct PointOfSaleCardPresentPaymentReaderDisconnectedMessageView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: POSSpacing.none) {
-            Image(decorative: PointOfSaleAssets.readerDisconnected.imageName)
+            POSCardPresentPaymentMessageViewImage(imageName: PointOfSaleAssets.readerDisconnected.imageName)
 
             Spacer()
                 .frame(height: dynamicSpacing(PointOfSaleCardPresentPaymentLayout.imageAndTextSpacing))
@@ -41,6 +41,7 @@ struct PointOfSaleCardPresentPaymentReaderDisconnectedMessageView: View {
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .frame(width: width * 0.5)
         }
+        .frame(maxWidth: .infinity)
         .measureWidth({ containerWidth in
             width = containerWidth
         })

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

@@ -7,11 +7,7 @@ struct PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: Constants.imageAndTextSpacing) {
-            Image(decorative: viewModel.imageName)
-                .resizable()
-                .aspectRatio(contentMode: .fill)
-                .frame(width: PointOfSaleCardPresentPaymentLayout.headerSize.width,
-                       height: PointOfSaleCardPresentPaymentLayout.headerSize.height)
+            POSCardPresentPaymentMessageViewImage(imageName: viewModel.imageName)
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
                 .renderedIf(!dynamicTypeSize.isAccessibilitySize)
             VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.textSpacing) {