Add a product "cover" tag over the cover image

[JorgeMucientes]

Closes: #13339

Description

Inspired by the new product editor design from wc-admin, we are adding a product Cover label on top of the product image that will be used as the product cover.

Main changes happening in:

• ProductImagesViewModel
• WCProductImageGalleryView

Testing information

1. Open the product detail screen with multiple images
2. Check there's a new label with the word Cover in the image that will be used as the product cover.
3. Add/remove/reorder product images and check the cover label is always placed in the correct image: the first one.

The tests that have been performed

The above.

Images/gif

AddCoverTag.mp4

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	bd0e0c3
	Direct Download	woocommerce-wear-prototype-build-pr13344-bd0e0c3.apk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	bd0e0c3
	Direct Download	woocommerce-prototype-build-pr13344-bd0e0c3.apk

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 57.14286% with 12 lines in your changes missing coverage. Please review.

Project coverage is 41.09%. Comparing base (d5af3f2) to head (bd0e0c3).
Report is 58 commits behind head on trunk.

Files with missing lines	Patch %	Lines
.../com/woocommerce/android/model/ProductVariation.kt	0.00%	5 Missing ⚠️
...erce/android/model/SubscriptionProductVariation.kt	0.00%	5 Missing ⚠️
...woocommerce/android/mediapicker/MediaPickerUtil.kt	0.00%	1 Missing ⚠️
...in/kotlin/com/woocommerce/android/model/Product.kt	88.88%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##              trunk   #13344   +/-   ##
=========================================
  Coverage     41.08%   41.09%           
- Complexity     6422     6424    +2     
=========================================
  Files          1322     1322           
  Lines         77249    77260   +11     
  Branches      10660    10660           
=========================================
+ Hits          31740    31749    +9     
- Misses        42693    42694    +1     
- Partials       2816     2817    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hafizrahman]

This looks good, nice work! I tested this in various situations: dark mode, light mode, very big font and display, landscape and portrait, and there's no issue.

The added unit tests I feel are also adequate.

My only slight concern is that with the background color and font color that the "Cover" indicator has, it looks a lot like a button especially on bigger fonts. Note how the bg and text color is similar to the plus button:

light	dark

Lastly, with the addition of this tag, merchants will start having questions about what is "Cover", and how to change it. What do you think about updating the text here to say: "Drag and drop to re-order photos. First photo will be set as the cover." ? I think that will help with that situation (we still have to figure out how to explain what cover is, though).

[JorgeMucientes]

Hey @hafizrahman thanks for the excellent input.

it looks a lot like a button especially on bigger fonts. Note how the bg and text color is similar to the plus button:

Yes, that might be a bit confusing, although I don't think is a major issue. Since the cover tag is not clickable and doesn't have any effect, user will quickly learn is not a button. In any case I'm open to ideas on improving this, because I can't see any quick solution for that. Currently we are replicating the UI in wp-admin, so users should be familiar with it:

.

merchants will start having questions about what is "Cover", and how to change it.

That's an excellent point! Change applied. cc: @itsmeichigo (I'll update the PT with this change, but in the meantime, beware of this Huong).

[hafizrahman]

In any case I'm open to ideas on improving this, because I can't see any quick solution for that

Yeah, I think the look is not ideal, but I don't know how to best present it as well. It's not a blocker indeed imo.

That's an excellent point! Change applied.

Nice! Looks great.