[Woo POS] Hide cart images when the view is too narrow (#15028)

Author: joshheald

WooCommerce/Classes/POS/Presentation/CartView.swift

@@ -15,6 +15,8 @@ struct CartView: View {
         posModel.cart.isNotEmpty && offSetPosition < 0
     }
 
+    @State private var shouldShowItemImages: Bool = false
+
     var body: some View {
         VStack {
             DynamicHStack(spacing: Constants.cartHeaderSpacing) {
@@ -71,6 +73,7 @@ struct CartView: View {
                         VStack(spacing: Constants.cartItemSpacing) {
                             ForEach(posModel.cart, id: \.id) { cartItem in
                                 ItemRowView(cartItem: cartItem,
+                                            showImage: $shouldShowItemImages,
                                             onItemRemoveTapped: posModel.orderStage == .building ? {
                                     posModel.remove(cartItem: cartItem)
                                 } : nil)
@@ -82,6 +85,15 @@ struct CartView: View {
                         .background(GeometryReader { geometry in
                             Color.clear.preference(key: ScrollOffSetPreferenceKey.self,
                                                    value: geometry.frame(in: coordinateSpace).origin.y)
+                            .onAppear {
+                                updateItemImageVisibility(cartListWidth: geometry.size.width)
+                            }
+                            .onChange(of: geometry.size.width) {
+                                updateItemImageVisibility(cartListWidth: $0)
+                            }
+                            .onChange(of: dynamicTypeSize) {
+                                updateItemImageVisibility(dynamicTypeSize: $0, cartListWidth: geometry.size.width)
+                            }
                         })
                         .onPreferenceChange(ScrollOffSetPreferenceKey.self) { position in
                             self.offSetPosition = position
@@ -158,6 +170,39 @@ private extension CartView {
             cart: posModel.cart,
             orderStage: posModel.orderStage)
     }
+
+    func updateItemImageVisibility(dynamicTypeSize: DynamicTypeSize? = nil, cartListWidth: CGFloat) {
+        let newVisibility = cartListWidth >= minimumWidthToShowItemImages(with: dynamicTypeSize ?? self.dynamicTypeSize)
+        guard newVisibility != shouldShowItemImages else {
+            return
+        }
+        shouldShowItemImages = newVisibility
+    }
+
+    func minimumWidthToShowItemImages(with dynamicTypeSize: DynamicTypeSize) -> CGFloat {
+        switch dynamicTypeSize {
+        case .xSmall, .small:
+            240
+        case .medium:
+            260
+        case .large:
+            270
+        case .xLarge:
+            280
+        case .xxLarge, .xxxLarge:
+            300
+        case .accessibility1:
+            320
+        case .accessibility2:
+            400
+        case .accessibility3, .accessibility4:
+            420
+        case .accessibility5:
+            450
+        @unknown default:
+            450
+        }
+    }
 }
 
 @available(iOS 17.0, *)

WooCommerce/Classes/POS/Presentation/ItemRowView.swift

@@ -5,11 +5,12 @@ struct ItemRowView: View {
     private let onItemRemoveTapped: (() -> Void)?
 
     @ScaledMetric private var scale: CGFloat = 1.0
-    @Environment(\.dynamicTypeSize) var dynamicTypeSize
     @Environment(\.colorScheme) var colorScheme
+    @Binding private var showProductImage: Bool
 
-    init(cartItem: CartItem, onItemRemoveTapped: (() -> Void)? = nil) {
+    init(cartItem: CartItem, showImage: Binding<Bool> = .constant(true), onItemRemoveTapped: (() -> Void)? = nil) {
         self.cartItem = cartItem
+        self._showProductImage = showImage
         self.onItemRemoveTapped = onItemRemoveTapped
     }
 
@@ -31,6 +32,7 @@ struct ItemRowView: View {
                     .font(Constants.itemPriceFont)
             }
             .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(.leading, showProductImage ? 0 : Constants.cardContentHorizontalPadding)
             .accessibilityElement(children: .combine)
 
             if let onItemRemoveTapped {
@@ -41,7 +43,7 @@ struct ItemRowView: View {
                         .font(.posBodyRegular)
                 })
                 .accessibilityLabel(Localization.removeFromCartAccessibilityLabel)
-                .padding()
+                .padding(.trailing, Constants.cardContentHorizontalPadding)
                 .foregroundColor(Color.posTertiaryText)
             }
         }
@@ -57,7 +59,7 @@ struct ItemRowView: View {
 
     @ViewBuilder
     private var productImage: some View {
-        if dynamicTypeSize >= .accessibility3 {
+        if !showProductImage {
             EmptyView()
         } else if let imageSource = cartItem.item.productImageSource {
             ProductImageThumbnail(productImageURL: URL(string: imageSource),
@@ -105,6 +107,7 @@ private extension ItemRowView {
         static let cardOutlineWidth: CGFloat = 1
         static let horizontalPadding: CGFloat = 16
         static let horizontalElementSpacing: CGFloat = 16
+        static let cardContentHorizontalPadding: CGFloat = 16
         static let itemTitleAndPriceSpacing: CGFloat = 4
         static let itemTitleFont: POSFontStyle = .posDetailEmphasized
         static let itemSubtitleFont: POSFontStyle = .posDetailLight

WooCommerce/Classes/POS/Utils/Color+WooCommercePOS.swift

@@ -32,7 +32,7 @@ extension Color {
         Color(
             UIColor(
                 light: .white,
-                dark: .tertiarySystemBackground
+                dark: UIColor(red: 44.0 / 255.0, green: 44.0 / 255.0, blue: 46.0 / 255.0, alpha: 1.0)
             )
         )
     }