Merge pull request #21107 from wordpress-mobile/issue/21105-feedback-…

…form-attachments-ui

Feedback form attachments UI

WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormActivity.kt

@@ -1,5 +1,6 @@
 package org.wordpress.android.ui.main.feedbackform
 
+import android.content.Intent
 import android.os.Build
 import android.os.Bundle
 import androidx.activity.viewModels
@@ -8,6 +9,7 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import dagger.hilt.android.AndroidEntryPoint
 import org.wordpress.android.ui.LocaleAwareActivity
+import org.wordpress.android.ui.RequestCodes
 
 @AndroidEntryPoint
 class FeedbackFormActivity : LocaleAwareActivity() {
@@ -26,6 +28,7 @@ class FeedbackFormActivity : LocaleAwareActivity() {
                     FeedbackFormScreen(
                         messageText = viewModel.messageText.collectAsState(),
                         isProgressShowing = viewModel.isProgressShowing.collectAsState(),
+                        attachments = viewModel.attachments.collectAsState(),
                         onMessageChanged = {
                             viewModel.updateMessageText(it)
                         },
@@ -34,10 +37,27 @@ class FeedbackFormActivity : LocaleAwareActivity() {
                         },
                         onCloseClick = {
                             viewModel.onCloseClick(this@FeedbackFormActivity)
+                        },
+                        onChooseMediaClick = {
+                            viewModel.onChooseMediaClick(this@FeedbackFormActivity)
+                        },
+                        onRemoveMediaClick = {
+                            viewModel.onRemoveMediaClick(it)
                         }
                     )
                 }
             }
         )
     }
+
+    @Deprecated("Deprecated in Java")
+    public override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
+        super.onActivityResult(requestCode, resultCode, data)
+
+        if (requestCode == RequestCodes.PHOTO_PICKER) {
+            data?.let {
+                viewModel.onPhotoPickerResult(this, it)
+            }
+        }
+    }
 }

WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormAttachment.kt

@@ -0,0 +1,29 @@
+package org.wordpress.android.ui.main.feedbackform
+
+import android.net.Uri
+import java.io.File
+
+data class FeedbackFormAttachment(
+    val uri: Uri,
+    val tempFile: File,
+    val displayName: String,
+    val mimeType: String,
+    val attachmentType: FeedbackFormAttachmentType,
+    val size: Long,
+)
+
+enum class FeedbackFormAttachmentType {
+    IMAGE,
+    VIDEO,
+}
+
+/**
+ * TODO
+ *
+fun FeedbackFormAttachment.toZenDeskAttachment(): SupportNetworkService.ZenDeskSupportTicket.Attachment {
+    return SupportNetworkService.ZenDeskSupportTicket.Attachment(
+        file = this.tempFile,
+        type = this.mimeType
+    )
+}
+*/

WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormScreen.kt

@@ -2,13 +2,19 @@ package org.wordpress.android.ui.main.feedbackform
 
 import android.content.Context
 import android.content.res.Configuration
+import android.net.Uri
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
@@ -19,28 +25,36 @@ import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.flow.MutableStateFlow
 import org.wordpress.android.R
 import org.wordpress.android.ui.compose.theme.M3Theme
+import java.io.File
 
 @Composable
 fun FeedbackFormScreen(
     messageText: State<String>?,
     isProgressShowing: State<Boolean?>,
+    attachments: State<List<FeedbackFormAttachment>>,
     onMessageChanged: (String) -> Unit,
     onSubmitClick: (context: Context) -> Unit,
-    onCloseClick: (context: Context) -> Unit
+    onCloseClick: (context: Context) -> Unit,
+    onChooseMediaClick: () -> Unit,
+    onRemoveMediaClick: (uri: Uri) -> Unit,
 ) {
     val context = LocalContext.current
     val message = messageText?.value ?: ""
@@ -51,6 +65,14 @@ fun FeedbackFormScreen(
                 onMessageChanged(it)
             },
         )
+        AttachmentButton(
+            onChooseMediaClick = onChooseMediaClick
+        )
+        attachments.value.forEach { attachment ->
+            AttachmentRow(attachment) {
+                onRemoveMediaClick(attachment.uri)
+            }
+        }
         SubmitButton(
             isEnabled = message.isNotEmpty(),
             isProgressShowing = isProgressShowing.value,
@@ -124,6 +146,90 @@ private fun SubmitButton(
     }
 }
 
+@Composable
+private fun AttachmentButton(
+    onChooseMediaClick: () -> Unit,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable {
+                onChooseMediaClick()
+            }
+            .padding(
+                vertical = V_PADDING.dp,
+                horizontal = H_PADDING.dp
+            ),
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.ic_attachment_link),
+            tint = MaterialTheme.colorScheme.primary,
+            contentDescription = null // decorative element
+        )
+        Text(
+            text = stringResource(R.string.feedback_form_add_attachments),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(
+                    horizontal = 10.dp
+                ),
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.primary,
+        )
+    }
+}
+
+@Composable
+private fun AttachmentRow(
+    attachment: FeedbackFormAttachment,
+    onDeleteClick: (Uri) -> Unit = {},
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(
+                horizontal = H_PADDING.dp,
+                vertical = 2.dp
+            ),
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(MaterialTheme.colorScheme.surfaceContainer)
+        ) {
+            Text(
+                text = attachment.displayName,
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.primary,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1.0f, true)
+                    .padding(
+                        vertical = V_PADDING.dp,
+                        horizontal = H_PADDING.dp
+                    )
+            )
+            IconButton(
+                onClick = { onDeleteClick(attachment.uri) },
+                modifier = Modifier
+                    .align(Alignment.CenterVertically)
+            ) {
+                Icon(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .weight(0.2f, false)
+                        .align(Alignment.CenterVertically)
+                        .size(24.dp),
+                    imageVector = Icons.Filled.Close,
+                    tint = MaterialTheme.colorScheme.primary,
+                    contentDescription = null,
+                )
+            }
+        }
+    }
+}
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun Screen(
@@ -167,20 +273,27 @@ private fun Screen(
 )
 @Composable
 private fun FeedbackFormScreenPreview() {
-    val content: @Composable () -> Unit = @Composable {
-        MessageSection(
-            messageText = null,
-            onMessageChanged = {},
-        )
-        SubmitButton(
-            isEnabled = true,
-            isProgressShowing = false,
-            onClick = { }
-        )
-    }
-    Screen(
-        content = content,
+    val attachment = FeedbackFormAttachment(
+        uri = Uri.parse("https://via.placeholder.com/150"),
+        attachmentType = FeedbackFormAttachmentType.IMAGE,
+        size = 123456789,
+        displayName = "attachment.jpg (1.2 MB)",
+        mimeType = "image/jpeg",
+        tempFile = File("/tmp/attachment.jpg")
+    )
+    val attachments = MutableStateFlow(listOf(attachment))
+    val isProgressShowing = MutableStateFlow<Boolean?>(null)
+    val messageText = MutableStateFlow("I love this app!")
+
+    FeedbackFormScreen(
+        messageText = messageText.collectAsState(),
+        isProgressShowing = isProgressShowing.collectAsState(),
+        attachments = attachments.collectAsState(),
+        onMessageChanged = {},
+        onSubmitClick = {},
         onCloseClick = {},
+        onChooseMediaClick = {},
+        onRemoveMediaClick = {}
     )
 }
 

WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormUtils.kt

@@ -0,0 +1,16 @@
+package org.wordpress.android.ui.main.feedbackform
+
+import javax.inject.Inject
+
+class FeedbackFormUtils @Inject constructor() {
+    /**
+     * Only images & photos are supported at this point
+     */
+    fun isSupportedMimeType(mimeType: String): Boolean {
+        return when {
+            mimeType.startsWith("image") -> true
+            mimeType.startsWith("video") -> true
+            else -> false
+        }
+    }
+}