NTP-65464 | RCBP | Previews w/ Gemini (#16305)

2025-05-26 15:28:46 +05:30
parent d2ffb3e6ea
commit 0fccccc9d0
10 changed files with 414 additions and 1 deletions
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/arc/ui/ArcNudgeBottomSheetContent.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/arc/ui/ArcNudgeBottomSheetContent.kt
@@ -36,6 +36,7 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.navi.bbps.R
@@ -139,6 +140,18 @@ fun ArcNudgeBottomSheetContent(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun ArcNudgeBottomSheetContentPreview() {
+    ArcNudgeBottomSheetContent(
+        onCloseClicked = {},
+        maxCoins = "6000",
+        thresholdInDays = "5",
+        isLocalArcTransactionCounterWidgetEnabled = true,
+        localArcTransactionCounterFormatted = "100+",
+    )
+}
+
@Composable
 private fun ArcCampaignInfoSection(
    modifier: Modifier = Modifier,
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/arc/ui/ArcStatusDescriptionCard.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/arc/ui/ArcStatusDescriptionCard.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.navi.base.utils.SPACE
@@ -135,3 +136,21 @@ fun ArcStatusDescriptionCard(
        }
    }
 }
+
+@Preview
+@Composable
+fun ArcStatusDescriptionCardPreview() {
+    val bbpsArcProperties =
+        BbpsArcProperties(
+            mainText = "If bill is pending after",
+            subText = "you will get extra",
+            icon = CommonR.drawable.arc_protect_icon,
+            thresholdDays = "3 days",
+        )
+    ArcStatusDescriptionCard(
+        bbpsArcProperties = bbpsArcProperties,
+        arcRewardCoins = "6000",
+        showArcRewardFromNudgeResponse = true,
+        onArcStatusWidgetKnowMoreClicked = {},
+    )
+}
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/BbpsGenericErrorBottomSheetContent.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/BbpsGenericErrorBottomSheetContent.kt
@@ -8,9 +8,14 @@
 package com.navi.bbps.common.ui

 import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.navi.base.utils.EMPTY
+import com.navi.bbps.common.model.view.NaviBbpsButtonAction
+import com.navi.bbps.common.model.view.NaviBbpsButtonTheme
 import com.navi.bbps.common.model.view.NaviBbpsErrorButtonConfig
 import com.navi.bbps.common.model.view.NaviBbpsErrorConfig
 import com.navi.bbps.common.model.view.NaviBbpsErrorEvent
+import com.navi.common.R as CommonR

@Composable
 fun BbpsGenericErrorBottomSheetContent(
@@ -32,3 +37,35 @@ fun BbpsGenericErrorBottomSheetContent(
        },
    )
 }
+
+@Preview
+@Composable
+fun BbpsGenericErrorBottomSheetContentPreview() {
+    BbpsGenericErrorBottomSheetContent(
+        errorEvent =
+            NaviBbpsErrorEvent(
+                errorConfig =
+                    NaviBbpsErrorConfig(
+                        iconResId = CommonR.drawable.ic_exclamation_red_border,
+                        title = "Something went wrong",
+                        description = "Please try again after some time.",
+                        buttonConfigs =
+                            listOf(
+                                NaviBbpsErrorButtonConfig(
+                                    text = "Retry",
+                                    type = NaviBbpsButtonTheme.Primary,
+                                    action = NaviBbpsButtonAction.Retry(action = "retry_action"),
+                                ),
+                                NaviBbpsErrorButtonConfig(
+                                    text = "Dismiss",
+                                    type = NaviBbpsButtonTheme.Secondary,
+                                    action = NaviBbpsButtonAction.Dismiss,
+                                ),
+                            ),
+                        code = EMPTY,
+                        tag = EMPTY,
+                    )
+            ),
+        onErrorCtaClick = { _, _ -> },
+    )
+}
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/CreditCardNumberBottomSheetContent.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/CreditCardNumberBottomSheetContent.kt
@@ -17,6 +17,7 @@ import androidx.compose.ui.Alignment.Companion.Start
 import androidx.compose.ui.Modifier
 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 androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
@@ -72,3 +73,9 @@ fun CreditCardNumberBottomSheetContent(closeSheet: () -> Unit) {
        )
    }
 }
+
+@Preview(showBackground = true)
+@Composable
+fun CreditCardNumberBottomSheetContentPreview() {
+    CreditCardNumberBottomSheetContent({})
+}
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/DropdownOptionsBottomSheetContent.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/DropdownOptionsBottomSheetContent.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.navi.bbps.clickableDebounce
@@ -73,3 +74,17 @@ fun DropdownOptionsBottomSheetContent(
        }
    }
 }
+
+@Preview(showBackground = true)
+@Composable
+fun DropdownOptionsBottomSheetContentPreview() {
+    val customerParam =
+        CustomerParam.Dropdown(
+            optional = false,
+            paramName = "Payment Mode",
+            values = listOf("Credit Card", "Debit Card", "Net Banking", "UPI"),
+            isGroupSelectionDropdown = false,
+            requiredIn = "paymentDetails",
+        )
+    DropdownOptionsBottomSheetContent(customerParam = customerParam, onDropdownValueClicked = {})
+}
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/NaviBbpsButtons.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/NaviBbpsButtons.kt
@@ -32,10 +32,12 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.navi.bbps.R
 import com.navi.bbps.common.theme.NaviBbpsColor
 import com.navi.common.utils.ClickDebounce
 import com.navi.common.utils.get
@@ -82,6 +84,12 @@ fun ThemeRoundedButton(
    }
 }

+@Preview
+@Composable
+fun ThemeRoundedButtonPreview() {
+    ThemeRoundedButton(text = "Theme Rounded Button", onClick = {})
+}
+
@Composable
 fun SecondaryRoundedButton(
    modifier: Modifier = Modifier,
@@ -117,6 +125,12 @@ fun SecondaryRoundedButton(
    }
 }

+@Preview
+@Composable
+fun SecondaryRoundedButtonPreview() {
+    SecondaryRoundedButton(text = "Secondary Rounded Button", onClick = {})
+}
+
@Composable
 fun ThemeRoundedButtonWithImage(
    modifier: Modifier = Modifier,
@@ -185,6 +199,17 @@ fun ThemeRoundedButtonWithImage(
    }
 }

+@Preview
+@Composable
+fun ThemeRoundedButtonWithImagePreview() {
+    ThemeRoundedButtonWithImage(
+        imageResId = R.drawable.ic_bbps_cross_with_grey_bg,
+        imageSize = 24.dp,
+        text = "Button With Image",
+        onClick = {},
+    )
+}
+
@Composable
 fun ThemeRoundedButtonV2(
    modifier: Modifier = Modifier,
@@ -220,3 +245,9 @@ fun ThemeRoundedButtonV2(
        )
    }
 }
+
+@Preview
+@Composable
+fun ThemeRoundedButtonV2Preview() {
+    ThemeRoundedButtonV2(text = "Theme Rounded Button V2", onClick = {})
+}
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/NaviBbpsCommonComposable.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/NaviBbpsCommonComposable.kt
@@ -103,6 +103,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
@@ -136,6 +137,8 @@ import com.navi.bbps.common.utils.getDisplayableAmount
 import com.navi.bbps.common.utils.getImageRequestBuilder
 import com.navi.bbps.feature.contactlist.model.view.PhoneContactEntity
 import com.navi.bbps.feature.mybills.model.view.MyBillEntity
+import com.navi.bbps.feature.mybills.model.view.UnpaidBillDetails
+import com.navi.bbps.feature.paybill.model.network.PaymentAmountExactness
 import com.navi.bbps.feature.prepaidrecharge.model.view.PlanItemEntity
 import com.navi.bbps.getBillTitleFromAccountHolderNameOrPrimaryCustomerParams
 import com.navi.bbps.noRippleClickableWithDebounce
@@ -255,6 +258,12 @@ fun NaviBbpsHeader(
    )
 }

+@Preview
+@Composable
+fun NaviBbpsHeaderPreview() {
+    NaviBbpsHeader(title = "Navi BBPS Header", onNavigationIconClick = {}, actionIconText = "HELP")
+}
+
@Composable
 fun PrimaryAndSecondaryButton(
    modifier: Modifier = Modifier,
@@ -279,6 +288,17 @@ fun PrimaryAndSecondaryButton(
    }
 }

+@Preview
+@Composable
+fun PrimaryAndSecondaryButtonPreview() {
+    PrimaryAndSecondaryButton(
+        primaryButtonText = "Primary Button",
+        onPrimaryButtonClicked = {},
+        secondaryButtonText = "Secondary Button",
+        onSecondaryButtonClicked = {},
+    )
+}
+
@Composable
 fun BottomSheetContentWithIconHeaderPrimarySecondaryButton(
    iconId: Int = CommonR.drawable.ic_exclamation_red_border,
@@ -365,6 +385,19 @@ fun BottomSheetContentWithIconHeaderPrimarySecondaryButton(
    }
 }

+@Preview
+@Composable
+fun BottomSheetContentWithIconHeaderPrimarySecondaryButtonPreview() {
+    BottomSheetContentWithIconHeaderPrimarySecondaryButton(
+        header = "Header Text",
+        description = "Description Text",
+        primaryButton = "Primary Button",
+        secondaryButton = "Secondary Button",
+        onPrimaryButtonClicked = {},
+        onSecondaryButtonClicked = {},
+    )
+}
+
@Composable
 fun BottomSheetContentWithVerticalPrimarySecondaryButton(
    iconId: Int = -1,
@@ -439,6 +472,20 @@ fun BottomSheetContentWithVerticalPrimarySecondaryButton(
    }
 }

+@Preview
+@Composable
+fun BottomSheetContentWithVerticalPrimarySecondaryButtonPreview() {
+    BottomSheetContentWithVerticalPrimarySecondaryButton(
+        iconId = CommonR.drawable.ic_exclamation_red_border,
+        headerText = AnnotatedString("Header Text"),
+        descriptionText = AnnotatedString("Description Text"),
+        primaryButtonText = "Primary Button",
+        secondaryButtonText = "Secondary Button",
+        onPrimaryButtonClicked = {},
+        onSecondaryButtonClicked = {},
+    )
+}
+
@Composable
 fun BbpsAsyncImage(modifier: Modifier = Modifier, imageUrl: String?, placeholderIconResId: Int) {
    AsyncImage(
@@ -654,6 +701,20 @@ fun InputTextFieldWithDescriptionHeader(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun InputTextFieldWithDescriptionHeaderPreview() {
+    InputTextFieldWithDescriptionHeader(
+        headerString = "Header Text",
+        placeHolderString = "Placeholder",
+        value = "Value",
+        isError = false,
+        errorMessage = "Error Message",
+        isTrailingIconEnabled = true,
+        onTrailingIconClicked = {},
+    )
+}
+
@Composable
 fun DropdownFieldWithDescriptionHeader(
    modifier: Modifier = Modifier,
@@ -721,6 +782,19 @@ fun DropdownFieldWithDescriptionHeader(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun DropdownFieldWithDescriptionHeaderPreview() {
+    DropdownFieldWithDescriptionHeader(
+        headerString = "Header Text",
+        placeHolderString = "Placeholder",
+        selectedItemText = "Selected Item",
+        onClick = {},
+        trailingIcon = CommonR.drawable.ic_chevron_down,
+        placeHolderComposable = { NaviText(text = "Placeholder Composable") },
+    )
+}
+
@Composable
 fun NaviBbpsModalBottomSheetLayout(
    sheetContent: @Composable ColumnScope.() -> Unit,
@@ -855,6 +929,20 @@ fun KeyValueWithCopySection(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun KeyValueWithCopySectionPreview() {
+    KeyValueWithCopySection(
+        modifier = Modifier.padding(16.dp),
+        key = "Key",
+        value = "Value with a very very long text to check ellipsis is working",
+        valueColor = NaviBbpsColor.textPrimary,
+        valueFontWeight = getFontWeight(FontWeightEnum.NAVI_HEADLINE_REGULAR),
+        iconId = CommonR.drawable.ic_copy,
+        onCopyIconClicked = {},
+    )
+}
+
@Composable
 fun NaviBbpsLottieAnimation(
    modifier: Modifier,
@@ -1041,6 +1129,18 @@ fun KeyValueTextSection(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun KeyValueTextSectionPreview() {
+    KeyValueTextSection(
+        modifier = Modifier.padding(16.dp),
+        key = "Key",
+        value = "Value",
+        keyColor = NaviBbpsColor.textTertiary,
+        valueColor = NaviBbpsColor.textPrimary,
+    )
+}
+
@Composable
 fun SetStatusBarColor(
    activity: Activity,
@@ -1155,6 +1255,20 @@ fun PermissionTile(
    }
 }

+@Preview
+@Composable
+fun PermissionTilePreview() {
+    PermissionTile(
+        permissionResult = NaviPermissionResult.HardDenied,
+        onContactPermissionClicked = {},
+        permissionDescription = stringResource(id = R.string.bbps_location_permission_description),
+        permissionDescriptionSetting =
+            stringResource(id = R.string.bbps_settings_permission_description_location),
+        imageResId = R.drawable.ic_bbps_location_permission_reqd,
+        imageSize = 32.dp,
+    )
+}
+
@Composable
 fun NaviBbpsRadioButton(
    modifier: Modifier = Modifier,
@@ -1263,6 +1377,20 @@ fun TitleDescriptionWithLinearProgressBar(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun TitleDescriptionWithLinearProgressBarPreview() {
+    TitleDescriptionWithLinearProgressBar(
+        iconResId = CommonR.drawable.ic_exclamation_red_border,
+        iconSize = 24.dp,
+        rolodexTitleList = listOf("Rolling Text 1", "Rolling Text 2", "Rolling Text 3"),
+        title = "Title",
+        description = "This is very very long description text to verify multiline folding.",
+        annotatedDescription = AnnotatedString("This is an annotated description."),
+        indicatorProgress = 0.75f,
+    )
+}
+
@Composable
 fun RolodexAnimationText(
    textsList: List<String>,
@@ -1356,6 +1484,16 @@ fun BbpsBillerConsentView(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun BbpsBillerConsentViewPreview() {
+    BbpsBillerConsentView(
+        isConsentProvided = true,
+        description = "I agree to the terms and conditions.",
+        onConsentViewClicked = {},
+    )
+}
+
@Composable
 fun TabIndicator(modifier: Modifier = Modifier, height: Dp, color: Color) {
    Box(
@@ -1665,6 +1803,62 @@ fun MyBillItem(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun MyBillItemPreview() {
+    val myBillEntity =
+        MyBillEntity(
+            billId = EMPTY,
+            billerId = EMPTY,
+            billTitle = EMPTY,
+            naviBillReference = EMPTY,
+            billerName = "Biller Name",
+            billerLogoUrl = EMPTY,
+            isAdhoc = false,
+            paymentAmountExactness = PaymentAmountExactness.EXACT,
+            fetchOption = EMPTY,
+            status = EMPTY,
+            formattedLastPaidDate = EMPTY,
+            epochLastPaidOn = EMPTY,
+            formattedLastPaidAmount = EMPTY,
+            actualLastPaidAmount = EMPTY,
+            primaryCustomerParamValue = "Primary Customer Param - 1234",
+            categoryId = EMPTY,
+            categoryName = EMPTY,
+            customerParams = emptyMap(),
+            nextActionCtaText = "Pay now",
+            isBillPaid = false,
+            isConsentProvided = false,
+            isConsentRequired = false,
+            unpaidBillWarning = "Due today",
+            unpaidBillDetails =
+                UnpaidBillDetails(
+                    referenceId = EMPTY,
+                    amount = "200",
+                    billDate = EMPTY,
+                    dueDate = EMPTY,
+                    billNumber = EMPTY,
+                    accountHolderName = EMPTY,
+                    billerAdditionalParams = listOf(),
+                    billPeriod = EMPTY,
+                    planItemDetails = mapOf(EMPTY to EMPTY),
+                    lastGeneratedTimestamp = EMPTY,
+                ),
+        )
+    MyBillItem(
+        modifier = Modifier,
+        isNewTagVisible = false,
+        myBillEntity = myBillEntity,
+        onBillItemClicked = {},
+        onUnpaidBillDetailsClicked = {},
+        onUnpaidBillClicked = {},
+        offerData = OfferData(),
+        refreshBillItemAndStatus = RefreshBillState(),
+        failedOrder = null,
+        onFailedOrderCalloutClicked = {},
+    )
+}
+
@Composable
 fun FailedOrderCallout(orderTimestamp: DateTime, onClick: () -> Unit) {
    Box(
@@ -1721,6 +1915,12 @@ fun FailedOrderCallout(orderTimestamp: DateTime, onClick: () -> Unit) {
    }
 }

+@Preview
+@Composable
+fun FailedOrderCalloutPreview() {
+    FailedOrderCallout(orderTimestamp = DateTime.now(), onClick = {})
+}
+
@Composable
 fun BillAmountAndDueDateSectionWithShimmer(
    refreshBillItemAndStatus: RefreshBillState,
@@ -1940,6 +2140,19 @@ fun OutlineRoundedThemeButton(
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun OutlineRoundedThemeButtonPreview() {
+    OutlineRoundedThemeButton(
+        isLogoVisible = true,
+        text = "Outline Button",
+        onClick = {},
+        isInLoadingState = false,
+        rippleColor = NaviBbpsColor.ctaPrimary,
+        iconResId = CommonR.drawable.ic_close_black,
+    )
+}
+
@Composable
 fun OriginLandingWidget(
    modifier: Modifier = Modifier,
@@ -1957,6 +2170,8 @@ fun OriginLandingWidget(
                    color = NaviBbpsColor.borderDefault,
                    shape = RoundedCornerShape(4.dp),
                )
+                .clip(shape = RoundedCornerShape(4.dp))
+                .background(NaviBbpsColor.bgDefault)
    ) {
        Row(
            modifier =
@@ -2085,3 +2300,9 @@ fun OriginLandingWidget(
        }
    }
 }
+
+@Preview
+@Composable
+fun OriginLandingWidgetPreview() {
+    OriginLandingWidget(onAddClicked = {}, isFirstTimeUser = true, detectedBills = listOf())
+}
--- a/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/NaviBbpsOffersCommonComposable.kt
+++ b/android/navi-bbps/src/main/kotlin/com/navi/bbps/common/ui/NaviBbpsOffersCommonComposable.kt
@@ -32,6 +32,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.navi.base.utils.EMPTY
@@ -128,6 +129,24 @@ fun BillItemOfferWithShimmer(offerData: OfferData?) {
    }
 }

+@Preview(showBackground = true)
+@Composable
+fun BillItemOfferWithShimmerPreview() {
+    val offerData =
+        OfferData(
+            categoryName = "CREDIT CARD BILL",
+            titlePrefix = "Flat",
+            titleSuffix = "1% coins",
+            descriptionPrefix = "up to 5,000 coins on credit card bills",
+            applicableInfo =
+                listOf(
+                    "Applicable only on bills paid via Navi UPI",
+                    "Applicable only on bills paid via Navi UPI",
+                ),
+        )
+    BillItemOfferWithShimmer(offerData = offerData)
+}
+
@Composable
 fun OfferRolodexWithShimmer(
    modifier: Modifier = Modifier,
@@ -189,6 +208,30 @@ fun OfferRolodexWithShimmer(
    }
 }

+@Preview
+@Composable
+fun OfferRolodexWithShimmerPreview() {
+    val offerData =
+        OfferData(
+            categoryName = "CREDIT CARD BILL",
+            titlePrefix = "Flat",
+            titleSuffix = "1% coins",
+            descriptionPrefix = "up to 5,000 coins on credit card bills",
+            applicableInfo =
+                listOf(
+                    "Applicable only on bills paid via Navi UPI",
+                    "Applicable only on bills paid via Navi UPI",
+                ),
+        )
+    val coinBurnData =
+        CoinBurnData(coinBalance = 100, applicableCoinDiscount = 10, cashEquivalentOfDiscount = 10)
+    OfferRolodexWithShimmer(
+        offerData = listOf(offerData, offerData),
+        coinBurnData = coinBurnData,
+        onClick = {},
+    )
+}
+
@Composable
 fun BbpsOfferBottomSheet(
    offerData: List<OfferData>,
@@ -226,6 +269,31 @@ fun BbpsOfferBottomSheet(
    }
 }

+@Preview
+@Composable
+fun BbpsOfferBottomSheetPreview() {
+    val offerData =
+        OfferData(
+            categoryName = "CREDIT CARD BILL",
+            titlePrefix = "Flat",
+            titleSuffix = "1% coins",
+            descriptionPrefix = "up to 5,000 coins on credit card bills",
+            applicableInfo =
+                listOf(
+                    "Applicable only on bills paid via Navi UPI",
+                    "Applicable only on bills paid via Navi UPI",
+                ),
+        )
+    val coinBurnData =
+        CoinBurnData(coinBalance = 100, applicableCoinDiscount = 10, cashEquivalentOfDiscount = 10)
+    BbpsOfferBottomSheet(
+        offerData = listOf(offerData, offerData),
+        offerListHeading = "4 Bill payment offers",
+        coinBurnData = coinBurnData,
+        closeSheet = {},
+    )
+}
+
 fun getOfferDataForMultipleBillItems(
    multipleOffersDataList: Map<String, List<OfferData>>?,
    billId: String,
--- a/android/navi-design/build.gradle
+++ b/android/navi-design/build.gradle
@@ -62,12 +62,15 @@ dependencies {
    api libs.androidx.compose.foundation
    api libs.androidx.compose.material
    api libs.androidx.compose.material3
+    api libs.androidx.compose.ui.toolingPreview
    api libs.androidx.constraintlayoutCompose
    api libs.androidx.core.ktx
    api libs.coil.compose
    api libs.facebook.shimmer
    api libs.glide.glide

+    debugApi libs.androidx.compose.ui.tooling
+
    implementation libs.accompanist.systemuicontroller
    implementation libs.android.material
    implementation libs.androidx.appcompat
--- a/android/navi-widgets/build.gradle
+++ b/android/navi-widgets/build.gradle
@@ -60,7 +60,6 @@ dependencies {
    api project(":navi-design")
    api libs.accompanist.pager
    api libs.accompanist.pagerIndicators
-    api libs.androidx.compose.ui.toolingPreview
    api libs.androidx.compose.ui.util
    api libs.androidx.media3.exoplayer
    api libs.androidx.media3.exoplayerHls