From c8c5188485030498cfda9a0ea1cc40514bb476dc Mon Sep 17 00:00:00 2001
From: Ondrej Ruttkay <ruttkay@gmail.com>
Date: Tue, 23 Jan 2024 21:46:39 +0100
Subject: [PATCH] Show a character counter when there are < 10 characters left

---
 .../ad/BlazeCampaignCreationEditAdScreen.kt   | 63 ++++++++++++++-----
 1 file changed, 48 insertions(+), 15 deletions(-)

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/ad/BlazeCampaignCreationEditAdScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/ad/BlazeCampaignCreationEditAdScreen.kt
index 7f614b41f55..74f760e3e17 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/ad/BlazeCampaignCreationEditAdScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/ad/BlazeCampaignCreationEditAdScreen.kt
@@ -39,6 +39,7 @@ import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import coil.compose.SubcomposeAsyncImage
 import coil.request.ImageRequest.Builder
@@ -169,13 +170,20 @@ private fun AdDataSection(
             .fillMaxWidth(),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        WCOutlinedTextField(
-            value = viewState.tagLine,
-            onValueChange = onTagLineChanged,
-            label = stringResource(id = string.blaze_campaign_edit_ad_change_tagline_title),
-            singleLine = true,
-            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
-        )
+        Box {
+            WCOutlinedTextField(
+                value = viewState.tagLine,
+                onValueChange = onTagLineChanged,
+                label = stringResource(id = string.blaze_campaign_edit_ad_change_tagline_title),
+                singleLine = true,
+                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
+            )
+
+            CornerCharacterWarning(
+                charsLeft = viewState.taglineCharactersRemaining,
+                modifier = Modifier.align(Alignment.TopEnd)
+            )
+        }
 
         Text(
             text = stringResource(
@@ -189,16 +197,24 @@ private fun AdDataSection(
                 .fillMaxWidth()
         )
 
-        WCOutlinedTextField(
-            value = viewState.description,
-            onValueChange = onDescriptionChanged,
-            label = stringResource(id = string.blaze_campaign_edit_ad_change_description_title),
-            maxLines = 3,
-            minLines = 3,
-            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
+        Box(
             modifier = Modifier
                 .padding(top = dimensionResource(id = dimen.major_150))
-        )
+        ) {
+            WCOutlinedTextField(
+                value = viewState.description,
+                onValueChange = onDescriptionChanged,
+                label = stringResource(id = string.blaze_campaign_edit_ad_change_description_title),
+                maxLines = 3,
+                minLines = 3,
+                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
+            )
+
+            CornerCharacterWarning(
+                charsLeft = viewState.descriptionCharactersRemaining,
+                modifier = Modifier.align(Alignment.TopEnd)
+            )
+        }
 
         Text(
             text = stringResource(
@@ -247,6 +263,23 @@ private fun AdDataSection(
     }
 }
 
+@Composable
+private fun CornerCharacterWarning(charsLeft: Int, modifier: Modifier = Modifier) {
+    if (charsLeft < 10) {
+        Text(
+            text = charsLeft.toString(),
+            style = MaterialTheme.typography.caption,
+            color = colorResource(id = color.color_error),
+            textAlign = TextAlign.End,
+            modifier = modifier
+                .padding(
+                    top = dimensionResource(id = dimen.major_75),
+                    end = dimensionResource(id = dimen.minor_75)
+                )
+        )
+    }
+}
+
 @Composable
 private fun AdImageSection(viewState: ViewState, onChangeImageTapped: () -> Unit) {
     Column(