diff --git a/core/res/src/main/res/values/strings.xml b/core/res/src/main/res/values/strings.xml index d35ab1c6cf..4db0f5063e 100644 --- a/core/res/src/main/res/values/strings.xml +++ b/core/res/src/main/res/values/strings.xml @@ -1414,6 +1414,14 @@ Unlock Scan your card to unlock access Needed unlock + Get your free Crypto Card\nin minutes + Built-in security + Your card details are protected — full control in the app. + Everyday purchases + Use your USDC balance to pay for everyday purchases seamlessly. + Apple Pay & Google Pay + Add to your wallet and pay with your phone anywhere. + Get card Blockchain is unreachable. Try later Scan card or ring This wallet has already been activated earlier.\nIf it was not done by you, please contact support.\nTangem never sells wallets along with pre-generated access codes. diff --git a/core/ui/src/main/res/drawable/ic_credit_card_add_22.xml b/core/ui/src/main/res/drawable/ic_credit_card_add_22.xml new file mode 100644 index 0000000000..560684e1a9 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_credit_card_add_22.xml @@ -0,0 +1,16 @@ + + + + + diff --git a/core/ui/src/main/res/drawable/ic_security_check_22.xml b/core/ui/src/main/res/drawable/ic_security_check_22.xml new file mode 100644 index 0000000000..fd8956d8fa --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_security_check_22.xml @@ -0,0 +1,9 @@ + + + diff --git a/core/ui/src/main/res/drawable/ic_shopping_basket_22.xml b/core/ui/src/main/res/drawable/ic_shopping_basket_22.xml new file mode 100644 index 0000000000..c6cb19e2e7 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_shopping_basket_22.xml @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/build.gradle.kts b/features/tangempay/onboarding/impl/build.gradle.kts index ab2de5b977..8ebb588cdd 100644 --- a/features/tangempay/onboarding/impl/build.gradle.kts +++ b/features/tangempay/onboarding/impl/build.gradle.kts @@ -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) diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayOnboardingModel.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayOnboardingModel.kt index 02ca64323d..482864d146 100644 --- a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayOnboardingModel.kt +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayOnboardingModel.kt @@ -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() - private val _screenState: MutableStateFlow = MutableStateFlow(getInitState()) - val screenState = _screenState.asStateFlow() - - private fun getInitState() = TangemPayOnboardingScreenState + val screenState: StateFlow + field = MutableStateFlow(TangemPayOnboardingScreenState()) } \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt index 008f2c8798..42882bafb0 100644 --- a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt @@ -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()) + } } \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingBlock.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingBlock.kt new file mode 100644 index 0000000000..94dc71b1ba --- /dev/null +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingBlock.kt @@ -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, + ) + } + } +} \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingBlocks.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingBlocks.kt new file mode 100644 index 0000000000..71ae0aadcc --- /dev/null +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingBlocks.kt @@ -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), + ) +} \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingContent.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingContent.kt new file mode 100644 index 0000000000..ee247407a6 --- /dev/null +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingContent.kt @@ -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 = {}, + ), + ) + } + } +} \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingScreenState.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingScreenState.kt index a0681a0db9..8745cf3db9 100644 --- a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingScreenState.kt +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayOnboardingScreenState.kt @@ -1,3 +1,9 @@ package com.tangem.features.tangempay.ui -internal object TangemPayOnboardingScreenState \ No newline at end of file +import javax.annotation.concurrent.Immutable + +@Immutable +internal data class TangemPayOnboardingScreenState( + val fullScreenLoading: Boolean = true, + val buttonLoading: Boolean = false, +) \ No newline at end of file diff --git a/features/tangempay/onboarding/impl/src/main/res/drawable-night/img_tangem_pay_onboarding.webp b/features/tangempay/onboarding/impl/src/main/res/drawable-night/img_tangem_pay_onboarding.webp new file mode 100644 index 0000000000..97f81422fd Binary files /dev/null and b/features/tangempay/onboarding/impl/src/main/res/drawable-night/img_tangem_pay_onboarding.webp differ diff --git a/features/tangempay/onboarding/impl/src/main/res/drawable/img_tangem_pay_onboarding.webp b/features/tangempay/onboarding/impl/src/main/res/drawable/img_tangem_pay_onboarding.webp new file mode 100644 index 0000000000..2240694474 Binary files /dev/null and b/features/tangempay/onboarding/impl/src/main/res/drawable/img_tangem_pay_onboarding.webp differ