Updated on 2026-08-14

This commit is contained in:
Tangem 2025-09-10 18:02:30 +04:00
parent ac121ce008
commit 941baf081b
13 changed files with 237 additions and 11 deletions

View file

@ -18,9 +18,11 @@ dependencies {
/** Common */
implementation(projects.common.routing)
implementation(projects.common.ui)
/** Features api */
implementation(projects.features.tangempay.onboarding.api)
implementation(projects.features.kyc.api)
/** Compose */
implementation(deps.compose.foundation)

View file

@ -8,7 +8,7 @@ import com.tangem.features.tangempay.components.TangemPayOnboardingComponent
import com.tangem.features.tangempay.ui.TangemPayOnboardingScreenState
import com.tangem.utils.coroutines.CoroutineDispatcherProvider
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.StateFlow
import javax.inject.Inject
@Stable
@ -21,8 +21,6 @@ internal class TangemPayOnboardingModel @Inject constructor(
@Suppress("UnusedPrivateMember")
private val params = paramsContainer.require<TangemPayOnboardingComponent.Params>()
private val _screenState: MutableStateFlow<TangemPayOnboardingScreenState> = MutableStateFlow(getInitState())
val screenState = _screenState.asStateFlow()
private fun getInitState() = TangemPayOnboardingScreenState
val screenState: StateFlow<TangemPayOnboardingScreenState>
field = MutableStateFlow(TangemPayOnboardingScreenState())
}

View file

@ -1,15 +1,17 @@
package com.tangem.features.tangempay.ui
import android.content.res.Configuration
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.tangem.core.ui.R
import com.tangem.core.ui.components.appbar.AppBarWithBackButton
import com.tangem.core.ui.res.TangemThemePreview
@Suppress("UnusedPrivateMember")
@Composable
internal fun TandemPayOnboardingScreen(state: TangemPayOnboardingScreenState, modifier: Modifier = Modifier) {
Scaffold(
@ -18,14 +20,25 @@ internal fun TandemPayOnboardingScreen(state: TangemPayOnboardingScreenState, mo
AppBarWithBackButton(
modifier = Modifier.statusBarsPadding(),
onBackClick = {},
text = "",
iconRes = R.drawable.ic_back_24,
)
},
content = { paddingValues ->
val contentModifier = Modifier
.padding(paddingValues)
.fillMaxSize()
TangemPayOnboardingContent(
modifier = Modifier
.padding(paddingValues)
.fillMaxSize(),
state = state,
)
},
)
}
@Preview(showBackground = true)
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun PreviewDarkTheme() {
TangemThemePreview {
TandemPayOnboardingScreen(state = TangemPayOnboardingScreenState())
}
}

View file

@ -0,0 +1,48 @@
package com.tangem.features.tangempay.ui
import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.resolveReference
import com.tangem.core.ui.res.TangemTheme
@Composable
internal fun TangemPayOnboardingBlock(
@DrawableRes painterRes: Int,
titleRef: TextReference,
descriptionRef: TextReference,
modifier: Modifier = Modifier,
) {
Row(
modifier = modifier
.padding(start = 32.dp, end = 32.dp),
) {
Icon(
painter = painterResource(id = painterRes),
contentDescription = null,
modifier = Modifier
.width(24.dp)
.height(24.dp),
)
Column(
modifier = Modifier.padding(start = 12.dp),
) {
Text(
text = titleRef.resolveReference(),
style = TangemTheme.typography.subtitle1,
color = TangemTheme.colors.text.primary1,
)
Text(
text = descriptionRef.resolveReference(),
style = TangemTheme.typography.body2,
color = TangemTheme.colors.text.secondary,
)
}
}
}

View file

@ -0,0 +1,36 @@
package com.tangem.features.tangempay.ui
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.components.SpacerH
import com.tangem.core.ui.extensions.TextReference
@Composable
internal fun TangemPayOnboardingBLocks(modifier: Modifier = Modifier) {
TangemPayOnboardingBlock(
modifier = modifier,
painterRes = R.drawable.ic_security_check_22,
titleRef = TextReference.Res(R.string.tangempay_onboarding_security_title),
descriptionRef = TextReference.Res(R.string.tangempay_onboarding_security_description),
)
SpacerH(18.dp)
TangemPayOnboardingBlock(
modifier = modifier,
painterRes = R.drawable.ic_shopping_basket_22,
titleRef = TextReference.Res(R.string.tangempay_onboarding_purchases_title),
descriptionRef = TextReference.Res(R.string.tangempay_onboarding_purchases_description),
)
SpacerH(18.dp)
TangemPayOnboardingBlock(
modifier = modifier,
painterRes = R.drawable.ic_credit_card_add_22,
titleRef = TextReference.Res(R.string.tangempay_onboarding_pay_title),
descriptionRef = TextReference.Res(R.string.tangempay_onboarding_pay_description),
)
}

View file

@ -0,0 +1,80 @@
package com.tangem.features.tangempay.ui
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.tangem.common.ui.navigationButtons.NavigationButton
import com.tangem.common.ui.navigationButtons.NavigationPrimaryButton
import com.tangem.core.ui.components.SpacerH
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.stringResourceSafe
import com.tangem.core.ui.res.TangemTheme
import com.tangem.features.tangempay.onboarding.impl.R
@Composable
internal fun TangemPayOnboardingContent(state: TangemPayOnboardingScreenState, modifier: Modifier = Modifier) {
if (state.fullScreenLoading) {
Box(
modifier = modifier.fillMaxSize(),
contentAlignment = Alignment.Center,
) {
CircularProgressIndicator(
modifier = Modifier,
color = TangemTheme.colors.icon.primary1,
)
}
} else {
Column(
modifier
.fillMaxSize()
.navigationBarsPadding(),
) {
Column(
modifier = Modifier
.weight(1f)
.padding(top = 24.dp, bottom = 32.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
painter = painterResource(id = R.drawable.img_tangem_pay_onboarding),
contentDescription = null,
modifier = Modifier
.height(250.dp)
.fillMaxWidth(),
)
Text(
text = stringResourceSafe(R.string.tangempay_onboarding_title),
style = TangemTheme.typography.h2,
color = TangemTheme.colors.text.primary1,
textAlign = TextAlign.Center,
)
SpacerH(32.dp)
TangemPayOnboardingBLocks()
}
NavigationPrimaryButton(
modifier = Modifier
.imePadding()
.padding(start = 16.dp, end = 16.dp, bottom = 16.dp)
.fillMaxWidth(),
primaryButton = NavigationButton(
textReference = resourceReference(R.string.tangempay_onboarding_get_card_button_text),
iconRes = R.drawable.ic_tangem_24,
isIconVisible = true,
showProgress = state.buttonLoading,
onClick = {},
),
)
}
}
}

View file

@ -1,3 +1,9 @@
package com.tangem.features.tangempay.ui
internal object TangemPayOnboardingScreenState
import javax.annotation.concurrent.Immutable
@Immutable
internal data class TangemPayOnboardingScreenState(
val fullScreenLoading: Boolean = true,
val buttonLoading: Boolean = false,
)

Binary file not shown.

After

Width:  |  Height:  |  Size: 479 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB