diff --git a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/customerinput/ui/CustomerDataInputScreen.kt b/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/customerinput/ui/CustomerDataInputScreen.kt index 77fe8af168..170b027c5c 100644 --- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/customerinput/ui/CustomerDataInputScreen.kt +++ b/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)) } } } diff --git a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillCoinUtilisationComposables.kt b/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillCoinUtilisationComposables.kt index f121abd310..6a5c09201b 100644 --- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillCoinUtilisationComposables.kt +++ b/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 diff --git a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillScreen.kt b/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillScreen.kt index 7cb83a6da7..1e21b48d4b 100644 --- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/PayBillScreen.kt +++ b/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() } } diff --git a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/RenderCreditCardPayBillScreen.kt b/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/RenderCreditCardPayBillScreen.kt index c6b0373c6d..4e52546053 100644 --- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/feature/paybill/ui/RenderCreditCardPayBillScreen.kt +++ b/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, 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(