NTP-26750 | Collect Request UI Fix (#14494)

android/navi-pay/src/main/kotlin/com/navi/pay/common/ui/NaviPayButtons.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -30,15 +31,20 @@ import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -56,6 +62,7 @@ import com.navi.pay.common.theme.color.NaviPayColor
 import com.navi.pay.utils.NAVI_PAY_LOADER
 import com.navi.pay.utils.NAVI_PAY_NEXT_ACTION_CHEVRON_WHITE_LOTTIE
 import com.navi.pay.utils.NAVI_PAY_PURPLE_CTA_LOADER_LOTTIE
+import com.navi.pay.utils.pxToDp
 
 @Composable
 fun ThemeRoundedButton(
@@ -310,13 +317,14 @@ fun ThemedRoundedButton(
 
     val clickDebounce = remember { ClickDebounce.get() }
     val composition by rememberLottieComposition(LottieCompositionSpec.Asset(lottieFileName))
+    var constraints by remember { mutableStateOf(IntSize.Zero) }
 
     Button(
         elevation = ButtonDefaults.elevation(defaultElevation = 0.dp),
         onClick = { clickDebounce.processClick { onClick() } },
         modifier = modifier,
         shape = RoundedCornerShape(cornerRadius),
-        contentPadding = if (showLoader) PaddingValues(horizontal = 10.dp) else paddingValues,
+        contentPadding = PaddingValues(),
         enabled = enabled,
         colors =
             ButtonDefaults.buttonColors(
@@ -325,13 +333,25 @@ fun ThemedRoundedButton(
             ),
     ) {
         if (showLoader) {
-            LottieAnimation(
-                composition = composition,
-                iterations = LottieConstants.IterateForever,
-                modifier = Modifier.wrapContentWidth().height(lottieFileHeight),
-            )
+            Box(
+                modifier =
+                    Modifier.width(constraints.width.pxToDp()).height(constraints.height.pxToDp())
+            ) {
+                LottieAnimation(
+                    composition = composition,
+                    iterations = LottieConstants.IterateForever,
+                    modifier =
+                        Modifier.wrapContentWidth()
+                            .height(lottieFileHeight)
+                            .align(Alignment.Center),
+                    contentScale = ContentScale.Fit,
+                )
+            }
         } else {
             NaviText(
+                modifier =
+                    Modifier.onGloballyPositioned { coordinates -> constraints = coordinates.size }
+                        .padding(paddingValues),
                 text = text,
                 fontSize = fontSize,
                 fontFamily = naviFontFamily,

android/navi-pay/src/main/kotlin/com/navi/pay/management/collectrequest/ui/CollectRequestItem.kt

@@ -10,8 +10,6 @@ package com.navi.pay.management.collectrequest.ui
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -153,9 +151,7 @@ fun CollectRequestItem(
                             start.linkTo(userImage.end, 12.dp)
                             bottom.linkTo(parent.bottom, 16.dp)
                         }
-                        .layoutId(btnProceed)
-                        .height(32.dp)
-                        .width(104.dp),
+                        .layoutId(btnProceed),
                 text = stringResource(id = R.string.np_view_details),
                 fontSize = 12.sp,
                 paddingValues = PaddingValues(horizontal = 14.dp, vertical = 8.dp),

android/navi-pay/src/main/kotlin/com/navi/pay/utils/NaviPayExt.kt

@@ -11,7 +11,6 @@ import android.app.Activity
 import android.content.Context
 import android.content.Intent
 import android.content.pm.PackageManager
-import android.graphics.Color
 import android.net.Uri
 import android.os.Bundle
 import android.provider.Settings
@@ -23,13 +22,16 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.offset
 import androidx.compose.material.ripple
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.snapshots.SnapshotStateList
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Color as ComposeColor
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.SoftwareKeyboardController
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.core.app.ActivityCompat
 import androidx.core.content.getSystemService
@@ -463,3 +465,9 @@ fun String?.safeSubstring(startIndex: Int, endIndex: Int): String? {
         string.substring(startIndex, endIndex)
     } else null
 }
+
+@Composable
+fun Int.pxToDp(): Dp {
+    val density = LocalDensity.current
+    return with(density) { this@pxToDp.toFloat().toDp() }
+}