Skip to content

Commit 5c61280

Browse files
bmc08gtbmc08gt
committed
feat(flipcash): add intro screen for onramp verification flow
Signed-off-by: Brandon McAnsh <[email protected]>
1 parent 7e0507b commit 5c61280

File tree

6 files changed

+208
-26
lines changed

6 files changed

+208
-26
lines changed

‎apps/flipcash/app/src/main/kotlin/com/flipcash/app/internal/ui/navigation/AppScreenContent.kt

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -133,28 +133,6 @@ internal fun AppScreenContent(content: @Composable () -> Unit) {
133133
)
134134
}
135135

136-
// register<NavScreenProvider.HomeScreen.Verification.Phone> {
137-
// PhoneVerificationFlow.start(it.origin)
138-
// PhoneVerificationScreen()
139-
// }
140-
//
141-
// register<NavScreenProvider.HomeScreen.Verification.PhoneCountry> {
142-
// PhoneCountryCodeScreen()
143-
// }
144-
//
145-
// register<NavScreenProvider.HomeScreen.Verification.PhoneCode> {
146-
// PhoneCodeScreen()
147-
// }
148-
//
149-
// register<NavScreenProvider.HomeScreen.Verification.Email> {
150-
// EmailVerificationFlow.start(it.origin)
151-
// EmailVerificationScreen()
152-
// }
153-
//
154-
// register<NavScreenProvider.HomeScreen.Verification.EmailMagicLink> {
155-
// EmailMagicLinkScreen(it.email, it.code)
156-
// }
157-
158136
register<NavScreenProvider.HomeScreen.OnRamp.ProviderList> {
159137
OnRampFlowTracker.start(it.from)
160138
OnRampProviderListScreen(

‎apps/flipcash/core/src/main/res/drawable/ic_contact_method_verification.xml

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="128dp"
3+
android:height="128dp"
4+
android:viewportWidth="128"
5+
android:viewportHeight="128">
6+
<path
7+
android:pathData="M82.67,53.33C82.67,63.64 74.31,72 64,72C53.69,72 45.33,63.64 45.33,53.33C45.33,43.02 53.69,34.67 64,34.67C74.31,34.67 82.67,43.02 82.67,53.33Z"
8+
android:strokeLineJoin="round"
9+
android:strokeWidth="5.33333"
10+
android:fillColor="#00000000"
11+
android:strokeColor="#ffffff"/>
12+
<path
13+
android:pathData="M114.67,64C114.67,79.07 108.09,92.6 97.65,101.88C88.7,109.83 76.91,114.67 64,114.67C51.09,114.67 39.3,109.83 30.35,101.88C19.91,92.6 13.33,79.07 13.33,64C13.33,36.02 36.02,13.33 64,13.33C91.98,13.33 114.67,36.02 114.67,64Z"
14+
android:strokeLineJoin="round"
15+
android:strokeWidth="5.33333"
16+
android:fillColor="#00000000"
17+
android:strokeColor="#ffffff"/>
18+
<path
19+
android:pathData="M31.33,100.51C38.6,90.78 50.03,84.54 64,84.54C77.97,84.54 89.4,90.78 96.67,100.51"
20+
android:strokeLineJoin="round"
21+
android:strokeWidth="5.33333"
22+
android:fillColor="#00000000"
23+
android:strokeColor="#ffffff"/>
24+
<path
25+
android:pathData="M98.67,82.67L98.67,82.67A17.87,17.87 0,0 1,116.53 100.54L116.53,100.54A17.87,17.87 0,0 1,98.67 118.41L98.67,118.41A17.87,17.87 0,0 1,80.8 100.54L80.8,100.54A17.87,17.87 0,0 1,98.67 82.67z"
26+
android:fillColor="#001A0C"/>
27+
<path
28+
android:pathData="M107.6,93.56L98.67,90.49L89.73,93.56V100.44C89.73,105.99 94.2,108.36 98.67,110.76C103.13,108.36 107.6,105.99 107.6,100.44V93.56Z"
29+
android:strokeWidth="2.23335"
30+
android:fillColor="#00000000"
31+
android:strokeColor="#ffffff"
32+
android:strokeLineCap="square"/>
33+
<path
34+
android:pathData="M95.88,100.26L97.55,101.93L101.46,98.03"
35+
android:strokeWidth="2.23335"
36+
android:fillColor="#00000000"
37+
android:strokeColor="#ffffff"
38+
android:strokeLineCap="square"/>
39+
</vector>

‎apps/flipcash/core/src/main/res/values/strings.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,9 @@
359359
<string name="action_unlinkPhone">Unlink Phone</string>
360360
<string name="action_unlinkEmail">Unlink Email</string>
361361

362+
<string name="title_verificationFlow">Verify Your Phone Number And Email To Continue</string>
363+
<string name="subtitle_verificationFlowForOnramp">This will allow you to add funds from your debit card</string>"
364+
362365
<string name="title_email">Email</string>
363366
<string name="action_openMail">Open Mail</string>
364367
<string name="title_checkYourInbox">Check your inbox</string>

‎apps/flipcash/features/contact-verification/src/main/kotlin/com/flipcash/app/contact/verification/VerificationFlowScreen.kt

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import cafe.adriel.voyager.navigator.Navigator
1616
import cafe.adriel.voyager.transitions.SlideTransition
1717
import com.flipcash.app.contact.verification.email.EmailMagicLinkScreen
1818
import com.flipcash.app.contact.verification.email.EmailVerificationScreen
19+
import com.flipcash.app.contact.verification.internal.VerificationFlowIntroScreen
1920
import com.flipcash.app.contact.verification.phone.PhoneVerificationScreen
2021
import com.flipcash.app.core.NavScreenProvider
2122
import com.flipcash.app.core.verification.email.EmailDeeplinkOrigin
@@ -36,7 +37,7 @@ class VerificationFlowScreen(
3637
private val showSuccess: Boolean = target == null && (includePhone xor includeEmail),
3738
private val emailAddress: String? = null,
3839
private val emailVerificationCode: String? = null,
39-
): ModalScreen, Parcelable {
40+
) : ModalScreen, Parcelable {
4041
@IgnoredOnParcel
4142
override val key: ScreenKey = uniqueScreenKey
4243

@@ -70,6 +71,7 @@ class VerificationFlowScreen(
7071
}
7172
}
7273
}
74+
7375
fun goToTargetOrReturn(wasSuccessful: Boolean) {
7476
if (target != null) {
7577
codeNavigator.replace(ScreenRegistry.get(target))
@@ -87,7 +89,14 @@ class VerificationFlowScreen(
8789
EmailVerificationFlow.start(EmailDeeplinkOrigin.fromScreenProvider(origin))
8890
}
8991

90-
val screens = buildScreenSet(includePhone, includeEmail, emailAddress, emailVerificationCode)
92+
val screens =
93+
buildScreenSet(
94+
origin = origin,
95+
includePhone = includePhone,
96+
includeEmail = includeEmail,
97+
emailAddress = emailAddress,
98+
emailVerificationCode = emailVerificationCode
99+
)
91100
if (screens.isEmpty()) {
92101
goToTargetOrReturn(false)
93102
return
@@ -99,13 +108,18 @@ class VerificationFlowScreen(
99108
exit = { codeNavigator.pop() },
100109
continueFlowFrom = { step ->
101110
when (step) {
111+
VerificationFlowStep.Intro -> {
112+
navigator.push(PhoneVerificationScreen())
113+
}
114+
102115
VerificationFlowStep.Phone -> {
103116
if (includeEmail) {
104117
navigator.push(EmailVerificationScreen())
105118
} else {
106119
goToTargetOrReturn(wasSuccessful = true)
107120
}
108121
}
122+
109123
VerificationFlowStep.Email -> {
110124
goToTargetOrReturn(wasSuccessful = true)
111125
}
@@ -122,11 +136,15 @@ class VerificationFlowScreen(
122136
}
123137

124138
private fun buildScreenSet(
139+
origin: NavScreenProvider,
125140
includePhone: Boolean,
126141
includeEmail: Boolean,
127142
emailAddress: String?,
128143
emailVerificationCode: String?,
129144
): Set<Screen> {
145+
if (includePhone && includeEmail) {
146+
return setOf(VerificationFlowIntroScreen(origin is NavScreenProvider.HomeScreen.OnRamp.ProviderList))
147+
}
130148
if (includePhone) {
131149
return setOf(PhoneVerificationScreen())
132150
}
@@ -136,7 +154,7 @@ private fun buildScreenSet(
136154
return buildSet {
137155
add(EmailVerificationScreen())
138156
if (emailAddress != null && emailVerificationCode != null) {
139-
add(EmailMagicLinkScreen( emailAddress, emailVerificationCode))
157+
add(EmailMagicLinkScreen(emailAddress, emailVerificationCode))
140158
}
141159
}
142160
}
@@ -145,6 +163,7 @@ private fun buildScreenSet(
145163
}
146164

147165
enum class VerificationFlowStep {
166+
Intro,
148167
Phone,
149168
Email;
150169
}

‎apps/flipcash/features/contact-verification/src/main/kotlin/com/flipcash/app/contact/verification/internal/VerificationFlowIntroScreen.kt

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
package com.flipcash.app.contact.verification.internal
2+
3+
import android.os.Parcelable
4+
import androidx.activity.compose.BackHandler
5+
import androidx.compose.foundation.Image
6+
import androidx.compose.foundation.background
7+
import androidx.compose.foundation.layout.Box
8+
import androidx.compose.foundation.layout.Column
9+
import androidx.compose.foundation.layout.Spacer
10+
import androidx.compose.foundation.layout.WindowInsets
11+
import androidx.compose.foundation.layout.fillMaxSize
12+
import androidx.compose.foundation.layout.fillMaxWidth
13+
import androidx.compose.foundation.layout.imePadding
14+
import androidx.compose.foundation.layout.navigationBars
15+
import androidx.compose.foundation.layout.padding
16+
import androidx.compose.foundation.layout.windowInsetsPadding
17+
import androidx.compose.material.Text
18+
import androidx.compose.runtime.Composable
19+
import androidx.compose.ui.Alignment
20+
import androidx.compose.ui.Alignment.Companion.Center
21+
import androidx.compose.ui.Modifier
22+
import androidx.compose.ui.res.painterResource
23+
import androidx.compose.ui.res.stringResource
24+
import androidx.compose.ui.text.style.TextAlign
25+
import androidx.compose.ui.tooling.preview.Preview
26+
import cafe.adriel.voyager.core.screen.Screen
27+
import cafe.adriel.voyager.core.screen.ScreenKey
28+
import cafe.adriel.voyager.core.screen.uniqueScreenKey
29+
import com.flipcash.app.contact.verification.LocalVerificationFlowNavigator
30+
import com.flipcash.app.contact.verification.VerificationFlowStep
31+
import com.flipcash.app.theme.FlipcashDesignSystem
32+
import com.flipcash.features.contact.verification.R
33+
import com.getcode.navigation.core.LocalCodeNavigator
34+
import com.getcode.theme.CodeTheme
35+
import com.getcode.ui.theme.ButtonState
36+
import com.getcode.ui.theme.CodeButton
37+
import com.getcode.ui.theme.CodeScaffold
38+
import com.getcode.ui.utils.rememberKeyboardController
39+
import kotlinx.parcelize.IgnoredOnParcel
40+
import kotlinx.parcelize.Parcelize
41+
42+
@Parcelize
43+
class VerificationFlowIntroScreen(
44+
private val isForOnRamp: Boolean = true,
45+
) : Screen, Parcelable {
46+
47+
@IgnoredOnParcel
48+
override val key: ScreenKey = uniqueScreenKey
49+
50+
@Composable
51+
override fun Content() {
52+
val codeNavigator = LocalCodeNavigator.current
53+
val flowNavigator = LocalVerificationFlowNavigator.current
54+
val keyboard = rememberKeyboardController()
55+
56+
VerificationFlowIntroScreenContent(
57+
isForOnRamp = isForOnRamp,
58+
onClick = { flowNavigator.continueFlowFrom(VerificationFlowStep.Intro) },
59+
)
60+
61+
BackHandler {
62+
keyboard.hideIfVisible {
63+
codeNavigator.pop()
64+
}
65+
}
66+
}
67+
}
68+
69+
@Composable
70+
private fun VerificationFlowIntroScreenContent(
71+
isForOnRamp: Boolean,
72+
onClick: () -> Unit,
73+
) {
74+
CodeScaffold(
75+
modifier = Modifier
76+
.fillMaxSize()
77+
.windowInsetsPadding(WindowInsets.navigationBars),
78+
bottomBar = {
79+
CodeButton(
80+
modifier = Modifier
81+
.fillMaxWidth()
82+
.padding(horizontal = CodeTheme.dimens.inset)
83+
.padding(bottom = CodeTheme.dimens.grid.x3)
84+
.imePadding(),
85+
buttonState = ButtonState.Filled,
86+
text = stringResource(R.string.action_next),
87+
) { onClick() }
88+
}
89+
) { innerPadding ->
90+
Box(
91+
modifier = Modifier
92+
.fillMaxSize()
93+
.padding(innerPadding),
94+
contentAlignment = Center
95+
) {
96+
Column(
97+
modifier = Modifier
98+
.fillMaxWidth(0.8f),
99+
horizontalAlignment = Alignment.CenterHorizontally,
100+
) {
101+
Spacer(Modifier.weight(1f))
102+
Image(
103+
painter = painterResource(R.drawable.ic_contact_method_verification),
104+
contentDescription = null
105+
)
106+
Text(
107+
modifier = Modifier
108+
.padding(top = CodeTheme.dimens.inset),
109+
text = stringResource(R.string.title_verificationFlow),
110+
style = CodeTheme.typography.textLarge,
111+
color = CodeTheme.colors.textMain,
112+
textAlign = TextAlign.Center,
113+
)
114+
115+
if (isForOnRamp) {
116+
Text(
117+
modifier = Modifier
118+
.padding(top = CodeTheme.dimens.grid.x3)
119+
.padding(horizontal = CodeTheme.dimens.inset),
120+
text = stringResource(R.string.subtitle_verificationFlowForOnramp),
121+
style = CodeTheme.typography.textMedium,
122+
color = CodeTheme.colors.textSecondary,
123+
textAlign = TextAlign.Center,
124+
)
125+
}
126+
Spacer(Modifier.weight(1f))
127+
}
128+
}
129+
}
130+
}
131+
132+
@Preview
133+
@Composable
134+
private fun Preview_FlowIntro() {
135+
FlipcashDesignSystem {
136+
Box(modifier = Modifier.fillMaxSize().background(CodeTheme.colors.background)) {
137+
VerificationFlowIntroScreenContent(
138+
isForOnRamp = true,
139+
onClick = { }
140+
)
141+
}
142+
}
143+
}

‎apps/flipcash/features/myaccount/src/main/kotlin/com/flipcash/app/myaccount/MyAccountScreen.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ class MyAccountScreen: ModalScreen, NamedScreen, Parcelable {
9090
val flow = NavScreenProvider.HomeScreen.Verification.Flow(
9191
origin = NavScreenProvider.HomeScreen.Menu.MyAccount.Root,
9292
includePhone = true,
93-
includeEmail = false,
93+
includeEmail = true,
9494
)
9595

9696
navigator.push(ScreenRegistry.get(flow)) }

0 commit comments

Comments
 (0)