Make ProductImageThumbnail's placeholder view injectable so that POS image view can pass a different placeholder image.

Author: jaclync

WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemImageView.swift

@@ -6,21 +6,27 @@ struct POSItemImageView: View {
     let imageSize: CGFloat
     let scale: CGFloat
 
+    private var placeholderView: some View {
+        Rectangle()
+            .foregroundColor(Constants.placeholderBackgroundColor)
+            .overlay {
+                Text(Image(systemName: "archivebox"))
+                    .font(.posButtonSymbol)
+                    .foregroundColor(Constants.placeholderIconColor)
+            }
+    }
+
     var body: some View {
         if let imageSource {
             ProductImageThumbnail(productImageURL: URL(string: imageSource),
                                   productImageSize: imageSize,
                                   scale: scale,
                                   foregroundColor: Constants.placeholderIconColor,
-                                  cachesOriginalImage: true)
+                                  cachesOriginalImage: true) {
+                placeholderView
+            }
         } else {
-            Rectangle()
-                .foregroundColor(Constants.placeholderBackgroundColor)
-                .overlay {
-                    Text(Image(systemName: "archivebox"))
-                        .font(.posButtonSymbol)
-                        .foregroundColor(Constants.placeholderIconColor)
-                }
+            placeholderView
         }
     }
 }

WooCommerce/Classes/ViewRelated/Products/ProductSelector/ProductImageThumbnail.swift

@@ -1,13 +1,14 @@
 import SwiftUI
 import Kingfisher
 
-struct ProductImageThumbnail: View {
+struct ProductImageThumbnail<Placeholder: View>: View {
     private let productImageURL: URL?
     private let productImageSize: CGFloat
     private let scale: CGFloat
     private let productImageCornerRadius: CGFloat
     private let foregroundColor: Color
     private let cachesOriginalImage: Bool
+    private let placeholder: Placeholder
 
     /// Image processor to resize images in a background thread to avoid blocking the UI
     ///
@@ -23,21 +24,23 @@ struct ProductImageThumbnail: View {
          scale: CGFloat,
          productImageCornerRadius: CGFloat = 0,
          foregroundColor: Color,
-         cachesOriginalImage: Bool = false) {
+         cachesOriginalImage: Bool = false,
+         @ViewBuilder placeholder: () -> Placeholder) {
         self.productImageURL = productImageURL
         self.productImageSize = productImageSize
         self.scale = scale
         self.productImageCornerRadius = productImageCornerRadius
         self.foregroundColor = foregroundColor
         self.cachesOriginalImage = cachesOriginalImage
+        self.placeholder = placeholder()
     }
 
     var body: some View {
         KFImage
             .url(productImageURL)
             .cacheOriginalImage(cachesOriginalImage)
             .placeholder {
-                Image(uiImage: .productPlaceholderImage)
+                placeholder
             }
             .setProcessor(imageProcessor)
             .resizable()
@@ -48,3 +51,22 @@ struct ProductImageThumbnail: View {
             .accessibilityHidden(true)
     }
 }
+
+// Convenience initializer that maintains the default behavior.
+extension ProductImageThumbnail where Placeholder == Image {
+    init(productImageURL: URL?,
+         productImageSize: CGFloat,
+         scale: CGFloat,
+         productImageCornerRadius: CGFloat = 0,
+         foregroundColor: Color,
+         cachesOriginalImage: Bool = false) {
+        self.init(productImageURL: productImageURL,
+                 productImageSize: productImageSize,
+                 scale: scale,
+                 productImageCornerRadius: productImageCornerRadius,
+                 foregroundColor: foregroundColor,
+                 cachesOriginalImage: cachesOriginalImage) {
+            Image(uiImage: .productPlaceholderImage)
+        }
+    }
+}