Product Details: Display cover tag on the first product image (#15041)

itsmeichigo · web-flow · commit 7e6c816d2b50 · 2025-02-05T11:06:46.000+07:00
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -2,6 +2,7 @@
 *** Use [*****] to indicate smoke tests of all critical flows should be run on the final IPA before release (e.g. major library or OS update).
 21.7
 -----
+- [*] Product Details: Display cover tag on the first product image [https://github.com/woocommerce/woocommerce-ios/pull/15041]
 - [*] Payments: Update learn more links to open Stripe-specific docs when using that gateway [https://github.com/woocommerce/woocommerce-ios/pull/15035]
 - [x] Now, usernames and emails in text fields across multiple login views are no longer capitalized. [https://github.com/woocommerce/woocommerce-ios/pull/15002]
 
diff --git a/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/Collection View Cells/ProductImageCollectionViewCell.swift b/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/Collection View Cells/ProductImageCollectionViewCell.swift
@@ -7,11 +7,33 @@ final class ProductImageCollectionViewCell: UICollectionViewCell {
 
     var cancellableTask: Task<Void, Never>?
 
+    private(set) lazy var coverTagView: UIView = {
+        let containerView = UIView(frame: .zero)
+        containerView.backgroundColor = UIColor.primary
+        containerView.clipsToBounds = true
+        containerView.isHidden = true
+        containerView.layer.cornerRadius = Constants.tagCornerRadius
+        containerView.translatesAutoresizingMaskIntoConstraints = false
+        containerView.addSubview(tagLabel)
+        containerView.pinSubviewToAllEdges(tagLabel, insets: Constants.tagEdgeInsets)
+        return containerView
+    }()
+
+    private lazy var tagLabel: UILabel = {
+        let label = UILabel(frame: .zero)
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.applyCaption1Style()
+        label.textColor = UIColor(light: .white, dark: .black)
+        label.text = Localization.tagLabel
+        return label
+    }()
+
     override func awakeFromNib() {
         super.awakeFromNib()
         configureBackground()
         configureImageView()
         configureCellAppearance()
+        configureCoverTagView()
     }
 
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
@@ -46,6 +68,14 @@ private extension ProductImageCollectionViewCell {
         contentView.layer.borderColor = Colors.borderColor.cgColor
         contentView.layer.masksToBounds = Settings.maskToBounds
     }
+
+    func configureCoverTagView() {
+        contentView.addSubview(coverTagView)
+        NSLayoutConstraint.activate([
+            contentView.leadingAnchor.constraint(equalTo: coverTagView.leadingAnchor, constant: -Constants.tagPadding),
+            contentView.topAnchor.constraint(equalTo: coverTagView.topAnchor, constant: -Constants.tagPadding),
+        ])
+    }
 }
 
 /// Constants
@@ -54,6 +84,9 @@ private extension ProductImageCollectionViewCell {
     enum Constants {
         static let cornerRadius = CGFloat(2.0)
         static let borderWidth = CGFloat(0.5)
+        static let tagPadding = CGFloat(8)
+        static let tagCornerRadius = CGFloat(4)
+        static let tagEdgeInsets = UIEdgeInsets(top: 2, left: 4, bottom: 2, right: 4)
     }
 
     enum Colors {
@@ -65,4 +98,12 @@ private extension ProductImageCollectionViewCell {
         static let imageContentMode = ContentMode.center
         static let maskToBounds = true
     }
+
+    enum Localization {
+        static let tagLabel = NSLocalizedString(
+            "productImageCollectionViewCell.tagLabel.text",
+            value: "Cover",
+            comment: "Label indicating the cover image of a product"
+        )
+    }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesCollectionViewDataSource.swift b/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesCollectionViewDataSource.swift
@@ -38,7 +38,8 @@ private extension ProductImagesCollectionViewDataSource {
     func configure(collectionView: UICollectionView, _ cell: UICollectionViewCell, for item: ProductImagesItem, at indexPath: IndexPath) {
         switch item {
         case .image(let status):
-            configureImageCell(cell, productImageStatus: status)
+            let isFirstImage = indexPath.item == 0
+            configureImageCell(cell, productImageStatus: status, isFirstImage: isFirstImage)
         case .extendedAddImage(let isVariation):
             if let cell = cell as? ExtendedAddProductImageCollectionViewCell {
                 cell.configurePlaceholderLabelForProductImages(isVariation: isVariation)
@@ -48,10 +49,10 @@ private extension ProductImagesCollectionViewDataSource {
         }
     }
 
-    func configureImageCell(_ cell: UICollectionViewCell, productImageStatus: ProductImageStatus) {
+    func configureImageCell(_ cell: UICollectionViewCell, productImageStatus: ProductImageStatus, isFirstImage: Bool) {
         switch productImageStatus {
         case .remote(let image):
-            configureRemoteImageCell(cell, productImage: image)
+            configureRemoteImageCell(cell, productImage: image, isFirstImage: isFirstImage)
         case .uploading(let asset):
             switch asset {
                 case .phAsset(let asset):
@@ -62,7 +63,7 @@ private extension ProductImagesCollectionViewDataSource {
         }
     }
 
-    func configureRemoteImageCell(_ cell: UICollectionViewCell, productImage: ProductImage) {
+    func configureRemoteImageCell(_ cell: UICollectionViewCell, productImage: ProductImage, isFirstImage: Bool) {
         guard let cell = cell as? ProductImageCollectionViewCell else {
             fatalError()
         }
@@ -83,6 +84,7 @@ private extension ProductImagesCollectionViewDataSource {
             cell?.imageView.contentMode = .scaleAspectFit
             cell?.imageView.image = image
         }
+        cell.coverTagView.isHidden = !isFirstImage
     }
 
     func configureUploadingImageCell(_ cell: UICollectionViewCell, asset: PHAsset) {
diff --git a/WooCommerce/Classes/ViewRelated/Products/Media/ProductImagesCollectionViewController.swift b/WooCommerce/Classes/ViewRelated/Products/Media/ProductImagesCollectionViewController.swift
@@ -72,18 +72,19 @@ extension ProductImagesCollectionViewController {
         let productImageStatus = productImageStatuses[indexPath.row]
         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: productImageStatus.cellReuseIdentifier,
                                                       for: indexPath)
-        configureCell(cell, productImageStatus: productImageStatus)
+        let isFirstImage = indexPath.row == 0
+        configureCell(cell, productImageStatus: productImageStatus, isFirstImage: isFirstImage)
         return cell
     }
 }
 
 // MARK: Cell configurations
 //
 private extension ProductImagesCollectionViewController {
-    func configureCell(_ cell: UICollectionViewCell, productImageStatus: ProductImageStatus) {
+    func configureCell(_ cell: UICollectionViewCell, productImageStatus: ProductImageStatus, isFirstImage: Bool) {
         switch productImageStatus {
         case .remote(let image):
-            configureRemoteImageCell(cell, productImage: image)
+            configureRemoteImageCell(cell, productImage: image, isFirstImage: isFirstImage)
         case .uploading(let asset):
             switch asset {
                 case .phAsset(let asset):
@@ -94,7 +95,7 @@ private extension ProductImagesCollectionViewController {
         }
     }
 
-    func configureRemoteImageCell(_ cell: UICollectionViewCell, productImage: ProductImage) {
+    func configureRemoteImageCell(_ cell: UICollectionViewCell, productImage: ProductImage, isFirstImage: Bool) {
         guard let cell = cell as? ProductImageCollectionViewCell else {
             fatalError()
         }
@@ -116,6 +117,7 @@ private extension ProductImagesCollectionViewController {
             cell.imageView.contentMode = .scaleAspectFit
             cell.imageView.image = image
         }
+        cell.coverTagView.isHidden = !isFirstImage
     }
 
     func configureUploadingImageCell(_ cell: UICollectionViewCell, asset: PHAsset) {
@@ -254,7 +256,9 @@ extension ProductImagesCollectionViewController: UICollectionViewDragDelegate, U
         }, completion: { [weak self] _ in
             // [Workaround] Reload the collection view if there are more than
             // one type of cells, for example, when there are any pending upload.
-            self?.reloadCollectionViewIfNeeded()
+            // Reloading is also necessary when the first image is updated.
+            let firstImageUpdated = item.sourceIndexPath?.item == 0 || destinationIndexPath.item == 0
+            self?.reloadCollectionViewIfNeeded(firstImageUpdated: firstImageUpdated)
         })
 
         coordinator.drop(item.dragItem, toItemAt: destinationIndexPath)
@@ -264,9 +268,10 @@ extension ProductImagesCollectionViewController: UICollectionViewDragDelegate, U
     /// Reloads collection view only if there is any pending upload.
     /// This makes sure that cells for pending uploads are reloaded properly
     /// to remove their overlays after uploading is done.
+    /// If the first image is updated, reloading is also necessary to update the Cover tag.
     ///
-    private func reloadCollectionViewIfNeeded() {
-        if productImageStatuses.hasPendingUpload {
+    private func reloadCollectionViewIfNeeded(firstImageUpdated: Bool) {
+        if firstImageUpdated || productImageStatuses.hasPendingUpload {
             collectionView.reloadData()
         }
     }
diff --git a/WooCommerce/Classes/ViewRelated/Products/Media/ProductImagesViewController.swift b/WooCommerce/Classes/ViewRelated/Products/Media/ProductImagesViewController.swift
@@ -371,7 +371,10 @@ private extension ProductImagesViewController {
         static let replacePhoto = NSLocalizedString("Replace Photo", comment: "Action to replace one photo on the Product images screen")
         static let variableProductHelperText = NSLocalizedString("Only one photo can be displayed by variation",
                                                                  comment: "Helper text above photo list in Product images screen")
-        static let dragAndDropHelperText = NSLocalizedString("Drag and drop to re-order photos",
-                                                             comment: "Drag and drop helper text above photo list in Product images screen")
+        static let dragAndDropHelperText = NSLocalizedString(
+            "productImagesViewController.dragAndDropHelperText",
+            value: "Drag and drop to re-order photos. The first photo will be set as the cover.",
+            comment: "Drag and drop helper text above photo list in Product images screen"
+        )
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,8 @@ private extension ProductImagesCollectionViewDataSource {`
`38`	`38`	`func configure(collectionView: UICollectionView, _ cell: UICollectionViewCell, for item: ProductImagesItem, at indexPath: IndexPath) {`
`39`	`39`	`switch item {`
`40`	`40`	`case .image(let status):`
`41`		`- configureImageCell(cell, productImageStatus: status)`
	`41`	`+ let isFirstImage = indexPath.item == 0`
	`42`	`+ configureImageCell(cell, productImageStatus: status, isFirstImage: isFirstImage)`
`42`	`43`	`case .extendedAddImage(let isVariation):`
`43`	`44`	`if let cell = cell as? ExtendedAddProductImageCollectionViewCell {`
`44`	`45`	`cell.configurePlaceholderLabelForProductImages(isVariation: isVariation)`
`@@ -48,10 +49,10 @@ private extension ProductImagesCollectionViewDataSource {`
`48`	`49`	`}`
`49`	`50`	`}`
`50`	`51`
`51`		`- func configureImageCell(_ cell: UICollectionViewCell, productImageStatus: ProductImageStatus) {`
	`52`	`+ func configureImageCell(_ cell: UICollectionViewCell, productImageStatus: ProductImageStatus, isFirstImage: Bool) {`
`52`	`53`	`switch productImageStatus {`
`53`	`54`	`case .remote(let image):`
`54`		`- configureRemoteImageCell(cell, productImage: image)`
	`55`	`+ configureRemoteImageCell(cell, productImage: image, isFirstImage: isFirstImage)`
`55`	`56`	`case .uploading(let asset):`
`56`	`57`	`switch asset {`
`57`	`58`	`case .phAsset(let asset):`
`@@ -62,7 +63,7 @@ private extension ProductImagesCollectionViewDataSource {`
`62`	`63`	`}`
`63`	`64`	`}`
`64`	`65`
`65`		`- func configureRemoteImageCell(_ cell: UICollectionViewCell, productImage: ProductImage) {`
	`66`	`+ func configureRemoteImageCell(_ cell: UICollectionViewCell, productImage: ProductImage, isFirstImage: Bool) {`
`66`	`67`	`guard let cell = cell as? ProductImageCollectionViewCell else {`
`67`	`68`	`fatalError()`
`68`	`69`	`}`
`@@ -83,6 +84,7 @@ private extension ProductImagesCollectionViewDataSource {`
`83`	`84`	`cell?.imageView.contentMode = .scaleAspectFit`
`84`	`85`	`cell?.imageView.image = image`
`85`	`86`	`}`
	`87`	`+ cell.coverTagView.isHidden = !isFirstImage`
`86`	`88`	`}`
`87`	`89`
`88`	`90`	`func configureUploadingImageCell(_ cell: UICollectionViewCell, asset: PHAsset) {`
Original file line number	Diff line number	Diff line change
`@@ -371,7 +371,10 @@ private extension ProductImagesViewController {`
`371`	`371`	`static let replacePhoto = NSLocalizedString("Replace Photo", comment: "Action to replace one photo on the Product images screen")`
`372`	`372`	`static let variableProductHelperText = NSLocalizedString("Only one photo can be displayed by variation",`
`373`	`373`	`comment: "Helper text above photo list in Product images screen")`
`374`		`- static let dragAndDropHelperText = NSLocalizedString("Drag and drop to re-order photos",`
`375`		`- comment: "Drag and drop helper text above photo list in Product images screen")`
	`374`	`+ static let dragAndDropHelperText = NSLocalizedString(`
	`375`	`+ "productImagesViewController.dragAndDropHelperText",`
	`376`	`+ value: "Drag and drop to re-order photos. The first photo will be set as the cover.",`
	`377`	`+ comment: "Drag and drop helper text above photo list in Product images screen"`
	`378`	`+ )`
`376`	`379`	`}`
`377`	`380`	`}`