TP-77625 | Mehul | Automatic keyboard scroll upon payment widget click, cc uat fixes (#12474)

Co-authored-by: Hardik Chaudhary <hardik.chaudhary@navi.com>
Co-authored-by: sidharthbamba <sidharth.bamba@navi.com>

android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/customerinput/ui/CustomerDataInputScreen.kt

@@ -229,17 +229,24 @@ fun CustomerDataInputScreen(
         Scaffold(
             modifier = Modifier.fillMaxSize(),
             topBar = {
-                HeaderForCustomerDataInputScreen(
-                    billCategoryEntity = billCategoryEntity,
-                    scrollState = scrollState,
-                    billerItemEntity = billerItemEntity,
-                    navigator = navigator,
-                    helpCtaText = customerDataInputViewModel.helpCta?.title.orEmpty(),
-                    onHelpCtaClicked = customerDataInputViewModel::onHelpCtaClicked
-                )
-                rewardsNudgeDetailEntity?.let {
-                    RewardsNudgeWithBg(modifier = Modifier.fillMaxWidth(), nudgeDetailEntity = it)
-                    Spacer(modifier = Modifier.height(16.dp))
+                Column {
+                    HeaderForCustomerDataInputScreen(
+                        billCategoryEntity = billCategoryEntity,
+                        scrollState = scrollState,
+                        billerItemEntity = billerItemEntity,
+                        navigator = navigator,
+                        helpCtaText = customerDataInputViewModel.helpCta?.title.orEmpty(),
+                        onHelpCtaClicked = customerDataInputViewModel::onHelpCtaClicked
+                    )
+                    if (billCategoryEntity.categoryId != CATEGORY_ID_CREDIT_CARD) {
+                        rewardsNudgeDetailEntity?.let {
+                            RewardsNudgeWithBg(
+                                modifier = Modifier.fillMaxWidth(),
+                                nudgeDetailEntity = it
+                            )
+                            Spacer(modifier = Modifier.height(16.dp))
+                        }
+                    }
                 }
             },
             content = { innerPadding ->
@@ -254,7 +261,7 @@ fun CustomerDataInputScreen(
                         is CustomerInputScreenState.Loading -> CustomerDataInputShimmer()
                         is CustomerInputScreenState.Loaded -> {
                             if (billCategoryEntity.categoryId == CATEGORY_ID_CREDIT_CARD) {
-                                Row {
+                                Row(verticalAlignment = Alignment.CenterVertically) {
                                     NaviText(
                                         text = billCategoryEntity.title,
                                         fontSize = 24.sp,
@@ -275,7 +282,8 @@ fun CustomerDataInputScreen(
                                                         .ic_bharat_billpay_vertical_logo
                                             ),
                                         contentDescription = "",
-                                        modifier = Modifier.size(24.dp)
+                                        modifier =
+                                            Modifier.size(24.dp).align(Alignment.CenterVertically)
                                     )
                                 }
 
@@ -308,51 +316,43 @@ fun CustomerDataInputScreen(
             },
             bottomBar = {
                 if (customerDataInputState is CustomerInputScreenState.Loaded) {
-                    if (
-                        billCategoryEntity.categoryId == CATEGORY_ID_CREDIT_CARD &&
-                            isCoinUtilisationExperimentEnabled
-                    ) {
-                        Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                            CoinUtilisationBottomNudge()
+                    Column {
+                        if (
+                            billCategoryEntity.categoryId == CATEGORY_ID_CREDIT_CARD &&
+                                isCoinUtilisationExperimentEnabled
+                        ) {
+                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                                CoinUtilisationBottomNudge()
+                            }
+                        } else if (billCategoryEntity.categoryId != CATEGORY_ID_CREDIT_CARD) {
+                            Column(
+                                modifier = Modifier.fillMaxWidth(),
+                                horizontalAlignment = Alignment.CenterHorizontally
+                            ) {
+                                Spacer(modifier = Modifier.height(16.dp))
 
-                            Spacer(modifier = Modifier.height(16.dp))
-
-                            LoaderRoundedButton(
-                                text = stringResource(id = R.string.bbps_confirm),
-                                onClick = customerDataInputViewModel::onContinueButtonClicked,
-                                enabled = isContinueButtonEnabled,
-                                modifier =
-                                    Modifier.fillMaxWidth()
-                                        .padding(horizontal = 16.dp)
-                                        .height(48.dp),
-                                showLoader = isBillDetailsLoading
-                            )
+                                Image(
+                                    modifier =
+                                        Modifier.width(58.dp)
+                                            .height(32.dp)
+                                            .align(Alignment.CenterHorizontally),
+                                    painter = painterResource(id = R.drawable.bbps_logo_with_text),
+                                    contentDescription = ""
+                                )
+                            }
                         }
-                    } else {
-                        Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                            Spacer(modifier = Modifier.height(16.dp))
+                        Spacer(modifier = Modifier.height(16.dp))
 
-                            Image(
-                                modifier = Modifier.width(58.dp).height(32.dp),
-                                painter = painterResource(id = R.drawable.bbps_logo_with_text),
-                                contentDescription = ""
-                            )
+                        LoaderRoundedButton(
+                            text = stringResource(id = R.string.bbps_confirm),
+                            onClick = customerDataInputViewModel::onContinueButtonClicked,
+                            enabled = isContinueButtonEnabled,
+                            modifier =
+                                Modifier.fillMaxWidth().padding(horizontal = 16.dp).height(48.dp),
+                            showLoader = isBillDetailsLoading
+                        )
 
-                            Spacer(modifier = Modifier.height(16.dp))
-
-                            LoaderRoundedButton(
-                                text = stringResource(id = R.string.bbps_confirm),
-                                onClick = customerDataInputViewModel::onContinueButtonClicked,
-                                enabled = isContinueButtonEnabled,
-                                modifier =
-                                    Modifier.fillMaxWidth()
-                                        .padding(horizontal = 16.dp)
-                                        .height(48.dp),
-                                showLoader = isBillDetailsLoading
-                            )
-
-                            Spacer(modifier = Modifier.height(32.dp))
-                        }
+                        Spacer(modifier = Modifier.height(16.dp))
                     }
                 }
             }

android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillCoinUtilisationComposables.kt

@@ -49,10 +49,7 @@ import com.navi.naviwidgets.extensions.NaviText
 
 @Composable
 fun CoinUtilisationBottomNudge() {
-    Box(
-        modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
-        contentAlignment = Alignment.Center
-    ) {
+    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
         Row(
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically

android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillScreen.kt

@@ -365,7 +365,22 @@ fun PayBillScreen(
                                                 initialPaymentAmount = initialPaymentAmount,
                                                 paymentAmount = paymentAmount,
                                                 onAmountValueChanged =
-                                                    payBillViewModel::onAmountValueChanged
+                                                    payBillViewModel::onAmountValueChanged,
+                                                scrollState = scrollState
+                                            )
+                                            Spacer(modifier = Modifier.weight(1f))
+                                            Spacer(modifier = Modifier.height(32.dp))
+
+                                            Image(
+                                                modifier =
+                                                    Modifier.width(58.dp)
+                                                        .height(32.dp)
+                                                        .align(Alignment.CenterHorizontally),
+                                                painter =
+                                                    painterResource(
+                                                        id = R.drawable.bbps_logo_with_text
+                                                    ),
+                                                contentDescription = ""
                                             )
                                         }
                                     }
@@ -458,6 +473,7 @@ fun PayBillScreen(
                                         billCategoryEntity.categoryId != CATEGORY_ID_CREDIT_CARD
                                 ) {
                                     Spacer(Modifier.weight(1f))
+                                    Spacer(modifier = Modifier.height(32.dp))
                                     CoinUtilisationBottomNudge()
                                 }
                             }

android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/RenderCreditCardPayBillScreen.kt

@@ -8,6 +8,7 @@
 package com.navi.bbps.feature.paybill.ui
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
@@ -21,8 +22,14 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
@@ -40,6 +47,7 @@ import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.google.firebase.crashlytics.FirebaseCrashlytics
+import com.navi.base.utils.INT_ZERO
 import com.navi.base.utils.ZERO_STRING
 import com.navi.base.utils.isNotNullAndNotEmpty
 import com.navi.bbps.R
@@ -72,6 +80,7 @@ import com.navi.naviwidgets.extensions.NaviText
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import java.text.SimpleDateFormat
 import java.util.Locale
+import kotlinx.coroutines.flow.filter
 
 @Composable
 fun RenderCreditCardPayBillScreen(
@@ -91,8 +100,24 @@ fun RenderCreditCardPayBillScreen(
     errorMessageId: Int,
     initialPaymentAmount: String,
     paymentAmount: String,
-    onAmountValueChanged: (String) -> Unit
+    onAmountValueChanged: (String) -> Unit,
+    scrollState: ScrollState
 ) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusRequester = remember { FocusRequester() }
+    val isOtherOptionSelected =
+        creditCardPaymentOptions.any { it.isSelected && it.type == CreditCardAmountType.OTHER }
+
+    LaunchedEffect(isOtherOptionSelected, scrollState) {
+        if (isOtherOptionSelected) {
+            focusRequester.requestFocus()
+            keyboardController?.show()
+            snapshotFlow { scrollState.maxValue }
+                .filter { it > INT_ZERO }
+                .collect { maxValue -> scrollState.animateScrollTo(maxValue) }
+        }
+    }
+
     Column(modifier = Modifier.fillMaxSize()) {
         NaviText(
             text = stringResource(id = R.string.bbps_credit_card_bill),
@@ -128,7 +153,9 @@ fun RenderCreditCardPayBillScreen(
 
         Spacer(modifier = Modifier.height(4.dp))
 
-        DueDateText(dueDate = payBillScreenState.billDetailsEntity.dueDate)
+        if (payBillScreenState.billDetailsEntity.dueDate.isNotNullAndNotEmpty()) {
+            DueDateText(dueDate = payBillScreenState.billDetailsEntity.dueDate)
+        }
 
         Spacer(modifier = Modifier.height(8.dp))
 
@@ -152,7 +179,8 @@ fun RenderCreditCardPayBillScreen(
             creditCardPaymentOptions = creditCardPaymentOptions,
             onCreditCardPaymentOptionSelected = onCreditCardPaymentOptionSelected,
             paymentAmount = paymentAmount,
-            onAmountValueChanged = onAmountValueChanged
+            onAmountValueChanged = onAmountValueChanged,
+            focusRequester = focusRequester
         )
 
         Spacer(modifier = Modifier.height(32.dp))
@@ -238,7 +266,8 @@ private fun PaymentAmountOptionsSection(
     creditCardPaymentOptions: List<CreditCardPaymentOption>,
     onCreditCardPaymentOptionSelected: (CreditCardPaymentOption) -> Unit,
     paymentAmount: String,
-    onAmountValueChanged: (String) -> Unit
+    onAmountValueChanged: (String) -> Unit,
+    focusRequester: FocusRequester
 ) {
     creditCardPaymentOptions.forEach {
         Spacer(modifier = Modifier.height(16.dp))
@@ -249,7 +278,8 @@ private fun PaymentAmountOptionsSection(
             creditCardPaymentOption = it,
             onCreditCardPaymentOptionSelected = onCreditCardPaymentOptionSelected,
             paymentAmount = paymentAmount,
-            onAmountValueChanged = onAmountValueChanged
+            onAmountValueChanged = onAmountValueChanged,
+            focusRequester = focusRequester
         )
     }
 }
@@ -262,7 +292,8 @@ private fun PaymentAmountOptionItem(
     creditCardPaymentOption: CreditCardPaymentOption,
     onCreditCardPaymentOptionSelected: (CreditCardPaymentOption) -> Unit,
     paymentAmount: String,
-    onAmountValueChanged: (String) -> Unit
+    onAmountValueChanged: (String) -> Unit,
+    focusRequester: FocusRequester
 ) {
     Column(
         modifier =
@@ -316,7 +347,7 @@ private fun PaymentAmountOptionItem(
             Spacer(modifier = Modifier.height(4.dp))
 
             InputTextFieldWithDescriptionHeader(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier.focusRequester(focusRequester = focusRequester).fillMaxWidth(),
                 inputFieldModifier =
                     Modifier.offset(x = (-4).dp)
                         .border(