[Image Uploads Improvement] Add entry points to the error screen

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/base/UIMessageResolver.kt

@@ -234,6 +234,21 @@ interface UIMessageResolver {
         anchorViewId?.let { setAnchorView(it) }
     }
 
+    /**
+     * Create and return a snackbar with the provided [UiString].
+     *
+     * @param [stringResId] The string resource id of the base message
+     * @param [stringArgs] Optional. One or more format argument stringArgs
+     */
+    fun getUiStringSnack(message: UiString) = when (message) {
+        is UiString.UiStringRes ->
+            Snackbar.make(snackbarRoot, message.stringRes, BaseTransientBottomBar.LENGTH_LONG)
+
+        is UiString.UiStringText -> Snackbar.make(snackbarRoot, message.text, BaseTransientBottomBar.LENGTH_LONG)
+    }.apply {
+        anchorViewId?.let { setAnchorView(it) }
+    }
+
     /**
      * Display a snackbar with the provided message.
      *
@@ -265,6 +280,7 @@ interface UIMessageResolver {
         val snackbar = when (message) {
             is UiString.UiStringRes ->
                 Snackbar.make(snackbarRoot, message.stringRes, BaseTransientBottomBar.LENGTH_LONG)
+
             is UiString.UiStringText -> Snackbar.make(snackbarRoot, message.text, BaseTransientBottomBar.LENGTH_LONG)
         }.apply {
             anchorViewId?.let { setAnchorView(it) }
@@ -296,6 +312,7 @@ interface UIMessageResolver {
         snackbar.show()
     }
 }
+
 private fun getIndefiniteSnackbarWithAction(
     view: View,
     msg: String,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/media/MediaFileUploadHandler.kt

@@ -81,10 +81,12 @@ class MediaFileUploadHandler @Inject constructor(
             is Event.MediaUploadEvent.FetchSucceeded -> {
                 enqueueMediaUpload(event)
             }
+
             is Event.MediaUploadEvent.FetchFailed -> {
                 statusList[index] = newStatus
                 showUploadFailureNotifIfNoObserver(event.productId, statusList)
             }
+
             is Event.MediaUploadEvent.UploadSucceeded -> {
                 if (externalObservers.contains(event.productId)) {
                     WooLog.d(WooLog.T.MEDIA, "MediaFileUploadHandler -> Upload successful, while handler is observed")
@@ -94,6 +96,7 @@ class MediaFileUploadHandler @Inject constructor(
                     statusList[index] = newStatus
                 }
             }
+
             is Event.MediaUploadEvent.UploadFailed -> {
                 WooLog.e(WooLog.T.MEDIA, "MediaFileUploadHandler -> Upload failed", event.error)
                 statusList[index] = newStatus
@@ -125,6 +128,7 @@ class MediaFileUploadHandler @Inject constructor(
         when (event) {
             is Event.ProductUpdateEvent.ProductUpdateFailed ->
                 notificationHandler.postUpdateFailureNotification(event.productId, event.product)
+
             is Event.ProductUpdateEvent.ProductUpdateSucceeded ->
                 notificationHandler.postUpdateSuccessNotification(event.productId, event.product, event.imagesCount)
         }
@@ -179,6 +183,7 @@ class MediaFileUploadHandler @Inject constructor(
         uris.forEach {
             worker.enqueueWork(Work.FetchMedia(remoteProductId, it))
         }
+        clearImageError(remoteProductId, uris)
     }
 
     fun cancelUpload(remoteProductId: Long) {
@@ -196,6 +201,16 @@ class MediaFileUploadHandler @Inject constructor(
         notificationHandler.removeUploadFailureNotification(remoteProductId)
     }
 
+    private fun clearImageError(remoteProductId: Long, uris: List<String>) {
+        uploadsStatus.update { list ->
+            list.filterNot {
+                it.remoteProductId == remoteProductId &&
+                    it.uploadStatus is UploadStatus.Failed &&
+                    uris.contains(it.localUri)
+            }
+        }
+    }
+
     fun observeCurrentUploadErrors(remoteProductId: Long): Flow<List<ProductImageUploadData>> =
         uploadsStatus.map { list ->
             list.filter { it.remoteProductId == remoteProductId && it.uploadStatus is UploadStatus.Failed }
@@ -267,12 +282,14 @@ class MediaFileUploadHandler @Inject constructor(
                 mediaErrorMessage = resourceProvider.getString(R.string.product_image_service_error_media_null),
                 mediaErrorType = MediaStore.MediaErrorType.NULL_MEDIA_ARG
             )
+
             is Event.MediaUploadEvent.FetchSucceeded -> UploadStatus.InProgress
             is Event.MediaUploadEvent.UploadFailed -> UploadStatus.Failed(
                 media = error.media,
                 mediaErrorMessage = error.errorMessage,
                 mediaErrorType = error.errorType
             )
+
             is Event.MediaUploadEvent.UploadSucceeded -> UploadStatus.UploadSuccess(media = media)
         }
         return ProductImageUploadData(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/media/MediaUploadErrorListViewModel.kt

@@ -46,9 +46,11 @@ class MediaUploadErrorListViewModel @Inject constructor(
         }
         mediaFileUploadHandler.observeCurrentUploadErrors(navArgs.remoteProductId)
             .filter { it.isNotEmpty() }
-            .onEach { errors ->
+            .onEach { newErrors ->
                 val currentErrors = _viewState.value.uploadErrorList +
-                    errors.map { ErrorUiModel(it.uploadStatus as UploadStatus.Failed, it.localUri) }
+                    newErrors
+                        .map { ErrorUiModel(it.uploadStatus as UploadStatus.Failed, it.localUri) }
+                        .filter { _viewState.value.uploadErrorList.contains(it).not() } // Filter duplicates
                 _viewState.update {
                     _viewState.value.copy(
                         uploadErrorList = currentErrors,
@@ -58,8 +60,6 @@ class MediaUploadErrorListViewModel @Inject constructor(
                         )
                     )
                 }
-                // Remove errors from mediaFileUploadHandler to avoid duplicate notifications
-                mediaFileUploadHandler.clearImageErrors(navArgs.remoteProductId)
             }
             .launchIn(this)
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/details/ProductDetailFragment.kt

@@ -37,6 +37,7 @@ import com.woocommerce.android.extensions.takeIfNotEqualTo
 import com.woocommerce.android.extensions.windowSizeClass
 import com.woocommerce.android.model.Product
 import com.woocommerce.android.model.Product.Image
+import com.woocommerce.android.model.UiString
 import com.woocommerce.android.ui.aztec.AztecEditorFragment
 import com.woocommerce.android.ui.aztec.AztecEditorFragment.Companion.ARG_AZTEC_EDITOR_TEXT
 import com.woocommerce.android.ui.aztec.AztecEditorFragment.Companion.ARG_AZTEC_TITLE_FROM_AI_DESCRIPTION
@@ -83,9 +84,10 @@ import com.woocommerce.android.ui.products.variations.VariationListViewModel.Var
 import com.woocommerce.android.ui.promobanner.PromoBanner
 import com.woocommerce.android.ui.promobanner.PromoBannerType
 import com.woocommerce.android.util.ChromeCustomTabUtils
+import com.woocommerce.android.util.UiHelpers.getTextOfUiString
 import com.woocommerce.android.util.WooAnimUtils
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.LaunchUrlInChromeTab
-import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowActionSnackbar
+import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowUiStringSnackbar
 import com.woocommerce.android.widgets.CustomProgressDialog
 import com.woocommerce.android.widgets.SkeletonView
 import com.woocommerce.android.widgets.WCProductImageGalleryView.OnGalleryImageInteractionListener
@@ -183,9 +185,11 @@ class ProductDetailFragment :
                         ProductsCommunicationViewModel.CommunicationEvent.ProductSelected(mode.remoteProductId)
                     )
                 }
+
                 is Mode.Loading, is Mode.Empty -> {
                     findNavController().popBackStack()
                 }
+
                 is Mode.AddNewProduct -> {
                 }
             }
@@ -223,6 +227,10 @@ class ProductDetailFragment :
         }
         binding.cardsRecyclerView.layoutManager = layoutManager
         binding.cardsRecyclerView.itemAnimator = null
+
+        binding.openUploadScreenButton.setOnClickListener {
+            viewModel.openUploadScreen()
+        }
     }
 
     private fun initializeViewModel() {
@@ -361,6 +369,9 @@ class ProductDetailFragment :
                     hideProgressDialog()
                 }
             }
+            new.hasUploadErrors?.takeIfNotEqualTo(old?.hasUploadErrors) { hasErrors ->
+                binding.openUploadScreenButton.visibility = if (hasErrors) View.VISIBLE else View.GONE
+            }
         }
 
         viewModel.productDetailCards.observe(viewLifecycleOwner) {
@@ -392,11 +403,7 @@ class ProductDetailFragment :
                     )
                 }
 
-                is ShowActionSnackbar -> displayProductImageUploadErrorSnackBar(
-                    event.message,
-                    event.actionText,
-                    event.action
-                )
+                is ShowUiStringSnackbar -> displayProductImageUploadErrorSnackBar(event.message)
 
                 is HideImageUploadErrorSnackbar -> imageUploadErrorsSnackbar?.dismiss()
                 is ShowLinkedProductPromoBanner -> showLinkedProductPromoBanner()
@@ -417,6 +424,7 @@ class ProductDetailFragment :
                 is ProductUpdated -> productsCommunicationViewModel.pushEvent(
                     ProductsCommunicationViewModel.CommunicationEvent.ProductUpdated
                 )
+
                 is ProductDetailViewModel.ShowUpdateProductError -> showUpdateProductError(event.message)
                 else -> event.isHandled = false
             }
@@ -521,19 +529,11 @@ class ProductDetailFragment :
         }
     }
 
-    private fun displayProductImageUploadErrorSnackBar(
-        message: String,
-        actionText: String,
-        actionListener: View.OnClickListener
-    ) {
+    private fun displayProductImageUploadErrorSnackBar(uiString: UiString) {
         if (imageUploadErrorsSnackbar == null) {
-            imageUploadErrorsSnackbar = uiMessageResolver.getIndefiniteActionSnack(
-                message = message,
-                actionText = actionText,
-                actionListener = actionListener
-            )
+            imageUploadErrorsSnackbar = uiMessageResolver.getUiStringSnack(message = uiString)
         } else {
-            imageUploadErrorsSnackbar?.setText(message)
+            imageUploadErrorsSnackbar?.setText(getTextOfUiString(requireContext(), uiString))
         }
         imageUploadErrorsSnackbar?.show()
     }
@@ -555,6 +555,7 @@ class ProductDetailFragment :
                 Loading, None -> {
                     binding.productErrorStateContainer.isVisible = false
                 }
+
                 is Error -> {
                     binding.productErrorStateContainer.isVisible = true
                     binding.productDetailRoot.isVisible = false

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/details/ProductDetailViewModel.kt

@@ -42,6 +42,7 @@ import com.woocommerce.android.model.ProductTag
 import com.woocommerce.android.model.RequestResult
 import com.woocommerce.android.model.SubscriptionDetails
 import com.woocommerce.android.model.SubscriptionPeriod
+import com.woocommerce.android.model.UiString.UiStringText
 import com.woocommerce.android.model.addTags
 import com.woocommerce.android.model.sortCategories
 import com.woocommerce.android.model.toAppModel
@@ -93,9 +94,9 @@ import com.woocommerce.android.util.WooLog
 import com.woocommerce.android.viewmodel.LiveDataDelegate
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.LaunchUrlInChromeTab
-import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowActionSnackbar
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowDialog
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowSnackbar
+import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowUiStringSnackbar
 import com.woocommerce.android.viewmodel.ResourceProvider
 import com.woocommerce.android.viewmodel.ScopedViewModel
 import com.woocommerce.android.viewmodel.getNullableStateFlow
@@ -930,6 +931,7 @@ class ProductDetailViewModel @Inject constructor(
             val positiveAction = DialogInterface.OnClickListener { _, _ ->
                 // Make sure to cancel any remaining image uploads
                 mediaFileUploadHandler.cancelUpload(getRemoteProductId())
+                mediaFileUploadHandler.clearImageErrors(getRemoteProductId())
                 triggerEvent(ProductNavigationTarget.ExitProduct)
             }
 
@@ -2134,15 +2136,16 @@ class ProductDetailViewModel @Inject constructor(
                     mediaFileUploadHandler.observeCurrentUploadErrors(productId)
                         .onEach { errorList ->
                             if (errorList.isEmpty()) {
+                                viewState = viewState.copy(hasUploadErrors = false)
                                 triggerEvent(HideImageUploadErrorSnackbar)
                             } else {
+                                viewState = viewState.copy(hasUploadErrors = true)
                                 triggerEvent(
-                                    ShowActionSnackbar(
-                                        message = resources.getMediaUploadErrorMessage(errorList.size),
-                                        actionText = resources.getString(R.string.details)
-                                    ) {
-                                        triggerEvent(ProductNavigationTarget.ViewMediaUploadErrors(productId))
-                                    }
+                                    ShowUiStringSnackbar(
+                                        message = UiStringText(
+                                            resources.getMediaUploadErrorMessage(errorList.size)
+                                        ),
+                                    )
                                 )
                             }
                         }
@@ -2651,6 +2654,10 @@ class ProductDetailViewModel @Inject constructor(
         }
     }
 
+    fun openUploadScreen() {
+        triggerEvent(ProductNavigationTarget.ViewMediaUploadErrors(getRemoteProductId()))
+    }
+
     /**
      * Sealed class that handles the back navigation for the product detail screens while providing a common
      * interface for managing them as a single type. Currently used in all the product sub detail screens when
@@ -2720,6 +2727,7 @@ class ProductDetailViewModel @Inject constructor(
         val productAggregateDraft: ProductAggregate? = null,
         val auxiliaryState: AuxiliaryState = AuxiliaryState.None,
         val uploadingImageUris: List<Uri>? = null,
+        val hasUploadErrors: Boolean? = null,
         val isProgressDialogShown: Boolean? = null,
         val showBottomSheetButton: Boolean? = null,
         val isConfirmingTrash: Boolean = false,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/images/ProductImagesFragment.kt

@@ -24,6 +24,7 @@ import com.woocommerce.android.extensions.navigateSafely
 import com.woocommerce.android.extensions.takeIfNotEqualTo
 import com.woocommerce.android.mediapicker.MediaPickerHelper
 import com.woocommerce.android.model.Product
+import com.woocommerce.android.model.UiString
 import com.woocommerce.android.ui.products.BaseProductEditorFragment
 import com.woocommerce.android.ui.products.ConfirmRemoveProductImageDialog
 import com.woocommerce.android.ui.products.ProductNavigationTarget
@@ -36,14 +37,15 @@ import com.woocommerce.android.ui.products.images.ProductImagesViewModel.ShowIma
 import com.woocommerce.android.ui.products.images.ProductImagesViewModel.ShowStorageChooser
 import com.woocommerce.android.ui.products.images.ProductImagesViewModel.ShowWPMediaPicker
 import com.woocommerce.android.util.ChromeCustomTabUtils
+import com.woocommerce.android.util.UiHelpers.getTextOfUiString
 import com.woocommerce.android.util.setHomeIcon
 import com.woocommerce.android.util.setupTabletSecondPaneToolbar
 import com.woocommerce.android.viewmodel.MultiLiveEvent
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.Exit
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ExitWithResult
-import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowActionSnackbar
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowDialog
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowSnackbar
+import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowUiStringSnackbar
 import com.woocommerce.android.viewmodel.fixedHiltNavGraphViewModels
 import com.woocommerce.android.widgets.WCProductImageGalleryView
 import dagger.hilt.android.AndroidEntryPoint
@@ -154,6 +156,10 @@ class ProductImagesFragment :
             }
         }
 
+        binding.openUploadScreenButton.setOnClickListener {
+            viewModel.openUploadScreen()
+        }
+
         setupTabletSecondPaneToolbar(
             title = getString(R.string.product_images_title),
             onMenuItemSelected = ::onMenuItemSelected,
@@ -194,6 +200,9 @@ class ProductImagesFragment :
                     }
                 }
             }
+            new.hasUploadErrors?.takeIfNotEqualTo(old?.hasUploadErrors) { hasErrors ->
+                binding.openUploadScreenButton.visibility = if (hasErrors) View.VISIBLE else View.GONE
+            }
             new.isDragDropDescriptionVisible?.takeIfNotEqualTo(old?.isDragDropDescriptionVisible) { isVisible ->
                 binding.dragAndDropDescription.isVisible = isVisible
             }
@@ -203,11 +212,7 @@ class ProductImagesFragment :
             when (event) {
                 is Exit -> findNavController().navigateUp()
                 is ShowSnackbar -> uiMessageResolver.showSnack(event.message)
-                is ShowActionSnackbar -> displayProductImageUploadErrorSnackBar(
-                    event.message,
-                    event.actionText,
-                    event.action
-                )
+                is ShowUiStringSnackbar -> displayProductImageUploadErrorSnackBar(event.message)
                 is ProductNavigationTarget -> navigator.navigate(this, event)
                 is ExitWithResult<*> -> navigateBackWithResult(KEY_IMAGES_DIALOG_RESULT, event.data)
                 is ShowDialog -> event.showDialog()
@@ -230,19 +235,11 @@ class ProductImagesFragment :
         ).show()
     }
 
-    private fun displayProductImageUploadErrorSnackBar(
-        message: String,
-        actionText: String,
-        actionListener: View.OnClickListener
-    ) {
+    private fun displayProductImageUploadErrorSnackBar(uiString: UiString) {
         if (imageUploadErrorsSnackbar == null) {
-            imageUploadErrorsSnackbar = uiMessageResolver.getIndefiniteActionSnack(
-                message = message,
-                actionText = actionText,
-                actionListener = actionListener
-            )
+            imageUploadErrorsSnackbar = uiMessageResolver.getUiStringSnack(message = uiString)
         } else {
-            imageUploadErrorsSnackbar?.setText(message)
+            imageUploadErrorsSnackbar?.setText(getTextOfUiString(requireContext(), uiString))
         }
         imageUploadErrorsSnackbar?.show()
     }