[WCiOS17] Update trait update API for product flows (#16140)

Author: RafaelKayumov

WooCommerce/Classes/Extensions/UICollectionViewCell+Helpers.swift

@@ -22,4 +22,14 @@ extension UICollectionViewCell {
     func applyGrayBackgroundStyle() {
         backgroundColor = .systemColor(.secondarySystemGroupedBackground)
     }
+
+    func applyContentBorderColorOnInterfaceStyleChange(borderColor: @escaping () -> UIColor) {
+        let traits: [UITrait] = [
+            UITraitUserInterfaceStyle.self,
+            UITraitAccessibilityContrast.self
+        ]
+        registerForTraitChanges(traits) { (self: Self, _: UITraitCollection) in
+            self.contentView.layer.borderColor = borderColor().cgColor
+        }
+    }
 }

WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/Collection View Cells/AddProductImageCollectionViewCell.swift

@@ -10,12 +10,7 @@ final class AddProductImageCollectionViewCell: UICollectionViewCell {
         configureBackground()
         configureImageView()
         configureCellAppearance()
-    }
-
-    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
-        super.traitCollectionDidChange(previousTraitCollection)
-        // Border color is not automatically updated on trait collection changes and thus manually updated here.
-        contentView.layer.borderColor = Colors.borderColor.cgColor
+        observeInterfaceStyleChange()
     }
 }
 
@@ -38,6 +33,13 @@ private extension AddProductImageCollectionViewCell {
         contentView.layer.borderColor = Colors.borderColor.cgColor
         contentView.layer.masksToBounds = Settings.maskToBounds
     }
+
+    func observeInterfaceStyleChange() {
+        /// The border color is not automatically updated on trait collection changes so we observe for changes and update it manually.
+        applyContentBorderColorOnInterfaceStyleChange {
+            return Colors.borderColor
+        }
+    }
 }
 
 /// Constants

WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/Collection View Cells/ProductImageCollectionViewCell.swift

@@ -35,12 +35,7 @@ final class ProductImageCollectionViewCell: UICollectionViewCell {
         configureImageView()
         configureCellAppearance()
         configureCoverTagView()
-    }
-
-    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
-        super.traitCollectionDidChange(previousTraitCollection)
-        // Border color is not automatically updated on trait collection changes and thus manually updated here.
-        contentView.layer.borderColor = Colors.borderColor.cgColor
+        observeInterfaceStyleChange()
     }
 
     override func prepareForReuse() {
@@ -86,6 +81,13 @@ private extension ProductImageCollectionViewCell {
             contentView.topAnchor.constraint(equalTo: coverTagView.topAnchor, constant: -Constants.tagPadding),
         ])
     }
+
+    func observeInterfaceStyleChange() {
+        /// Border color is not automatically updated on trait collection changes and thus manually updated here.
+        applyContentBorderColorOnInterfaceStyleChange {
+            return Colors.borderColor
+        }
+    }
 }
 
 /// Constants

WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderTableViewCell.swift

@@ -36,6 +36,7 @@ final class ProductImagesHeaderTableViewCell: UITableViewCell {
         configureBackground()
         configureSeparator()
         updateCollectionViewHeight()
+        observeInterfaceTraitChanges()
     }
 
     /// Configure cell
@@ -56,19 +57,6 @@ final class ProductImagesHeaderTableViewCell: UITableViewCell {
         }
     }
 
-    /// Rotation management and accessibility changes
-    ///
-    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
-        super.traitCollectionDidChange(previousTraitCollection)
-        if traitCollection != previousTraitCollection {
-            // Update collection view height for accessibility changes
-            updateCollectionViewHeight()
-            // Invalidate layout when trait collection changes (including accessibility changes)
-            collectionView.collectionViewLayout.invalidateLayout()
-            collectionView.reloadData()
-        }
-    }
-
     /// Updates the collection view height based on current accessibility settings
     private func updateCollectionViewHeight() {
         let cellSize = ProductImagesHeaderViewModel.cellSize(for: traitCollection.preferredContentSizeCategory)
@@ -166,6 +154,29 @@ private extension ProductImagesHeaderTableViewCell {
             collectionView.collectionViewLayout = ProductImagesFlowLayout(itemSize: dynamicSize, config: config)
         }
     }
+
+    /// Rotation management and accessibility changes
+    ///
+    func observeInterfaceTraitChanges() {
+        let traits: [UITrait] = [
+            UITraitPreferredContentSizeCategory.self,
+            UITraitHorizontalSizeClass.self,
+            UITraitVerticalSizeClass.self,
+            UITraitUserInterfaceStyle.self,
+            UITraitAccessibilityContrast.self
+        ]
+        registerForTraitChanges(traits) { (self: Self, previousTraitCollection: UITraitCollection) in
+            guard self.traitCollection != previousTraitCollection else {
+                return
+            }
+
+            /// Update collection view height for accessibility changes
+            self.updateCollectionViewHeight()
+            /// Invalidate layout when trait collection changes (including accessibility changes)
+            self.collectionView.collectionViewLayout.invalidateLayout()
+            self.collectionView.reloadData()
+        }
+    }
 }
 
 private extension ProductImagesHeaderTableViewCell {

WooCommerce/Classes/ViewRelated/Products/Cells/ProductsTabProductTableViewCell.swift

@@ -39,6 +39,7 @@ final class ProductsTabProductTableViewCell: UITableViewCell {
         configureDetailsLabel()
         configureProductImageView()
         configureBottomBorderView()
+        observeInterfaceTraitChanges()
         // From iOS 15.0, a focus effect will be applied automatically to a selected cell
         // modifying its style (e.g: by adding a border)
         focusEffect = nil
@@ -48,12 +49,6 @@ final class ProductsTabProductTableViewCell: UITableViewCell {
         fatalError("init(coder:) has not been implemented")
     }
 
-    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
-        super.traitCollectionDidChange(previousTraitCollection)
-        // Border color is not automatically updated on trait collection changes and thus manually updated here.
-        productImageView.layer.borderColor = Colors.imageBorderColor.cgColor
-    }
-
     override func updateConfiguration(using state: UICellConfigurationState) {
         super.updateConfiguration(using: state)
         updateDefaultBackgroundConfiguration(using: state)
@@ -266,6 +261,17 @@ private extension ProductsTabProductTableViewCell {
         productImageView.addSubview(view)
         productImageView.pinSubviewToAllEdges(view)
     }
+
+    func observeInterfaceTraitChanges() {
+        /// Border color is not automatically updated on trait collection changes and thus manually updated here.
+        let traits: [UITrait] = [
+            UITraitUserInterfaceStyle.self,
+            UITraitAccessibilityContrast.self
+        ]
+        registerForTraitChanges(traits) { (self: Self, _: UITraitCollection) in
+            self.productImageView.layer.borderColor = Colors.imageBorderColor.cgColor
+        }
+    }
 }
 
 /// Constants

WooCommerce/Classes/ViewRelated/Products/Edit Product/ProductFormViewController.swift

@@ -168,6 +168,7 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
         observeUpdateCTAVisibility()
         observeVariationsPriceChanges()
         observeUpdateBlazeEligibility()
+        observeTraitChanges()
 
         productImageStatusesSubscription = productImageActionHandler.addUpdateObserver(self) { [weak self] productImageStatuses in
             guard let self = self else {
@@ -203,12 +204,6 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
         return true
     }
 
-    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
-        super.traitCollectionDidChange(previousTraitCollection)
-
-        updateNavigationBarTitle()
-    }
-
     // MARK: - Navigation actions handling
 
     override func shouldPopOnBackButton() -> Bool {
@@ -949,6 +944,16 @@ private extension ProductFormViewController {
             self?.displayImageUploadErrorAlert(error: error, for: asset)
         })
     }
+
+    func observeTraitChanges() {
+        let traits: [UITrait] = [
+            UITraitHorizontalSizeClass.self,
+            UITraitVerticalSizeClass.self
+        ]
+        registerForTraitChanges(traits) { (self: Self, _) in
+            self.updateNavigationBarTitle()
+        }
+    }
 }
 
 // MARK: More details actions