diff --git a/app/src/main/java/com/anytypeio/anytype/di/main/MainComponent.kt b/app/src/main/java/com/anytypeio/anytype/di/main/MainComponent.kt
index 8932a2e552..2b1919c64a 100644
--- a/app/src/main/java/com/anytypeio/anytype/di/main/MainComponent.kt
+++ b/app/src/main/java/com/anytypeio/anytype/di/main/MainComponent.kt
@@ -111,7 +111,8 @@ interface MainComponent :
AddToAnytypeDependencies,
ShareSpaceDependencies,
SpaceJoinRequestDependencies,
- RequestJoinSpaceDependencies
+ RequestJoinSpaceDependencies,
+ PaymentsComponentDependencies
{
fun inject(app: AndroidApplication)
diff --git a/core-ui/src/main/res/drawable/ic_web_link.xml b/core-ui/src/main/res/drawable/ic_web_link.xml
new file mode 100644
index 0000000000..2f2e3309df
--- /dev/null
+++ b/core-ui/src/main/res/drawable/ic_web_link.xml
@@ -0,0 +1,11 @@
+
+
+
diff --git a/core-ui/src/main/res/drawable/logo_builder.xml b/core-ui/src/main/res/drawable/logo_builder.xml
new file mode 100644
index 0000000000..e1ff20d02f
--- /dev/null
+++ b/core-ui/src/main/res/drawable/logo_builder.xml
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/logo_co_creator.xml b/core-ui/src/main/res/drawable/logo_co_creator.xml
new file mode 100644
index 0000000000..a37c1555e3
--- /dev/null
+++ b/core-ui/src/main/res/drawable/logo_co_creator.xml
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/logo_custom.xml b/core-ui/src/main/res/drawable/logo_custom.xml
new file mode 100644
index 0000000000..96de90a70b
--- /dev/null
+++ b/core-ui/src/main/res/drawable/logo_custom.xml
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/logo_explorer.xml b/core-ui/src/main/res/drawable/logo_explorer.xml
new file mode 100644
index 0000000000..c167d2f364
--- /dev/null
+++ b/core-ui/src/main/res/drawable/logo_explorer.xml
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/payments_card_0.xml b/core-ui/src/main/res/drawable/payments_card_0.xml
new file mode 100644
index 0000000000..832dcb200a
--- /dev/null
+++ b/core-ui/src/main/res/drawable/payments_card_0.xml
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/payments_card_1.xml b/core-ui/src/main/res/drawable/payments_card_1.xml
new file mode 100644
index 0000000000..35d9864fa6
--- /dev/null
+++ b/core-ui/src/main/res/drawable/payments_card_1.xml
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/payments_card_2.xml b/core-ui/src/main/res/drawable/payments_card_2.xml
new file mode 100644
index 0000000000..8692f9d0f4
--- /dev/null
+++ b/core-ui/src/main/res/drawable/payments_card_2.xml
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core-ui/src/main/res/drawable/payments_card_3.xml b/core-ui/src/main/res/drawable/payments_card_3.xml
new file mode 100644
index 0000000000..0e74075639
--- /dev/null
+++ b/core-ui/src/main/res/drawable/payments_card_3.xml
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/localization/src/main/res/values/strings.xml b/localization/src/main/res/values/strings.xml
index 0526d4d115..2b13df92c2 100644
--- a/localization/src/main/res/values/strings.xml
+++ b/localization/src/main/res/values/strings.xml
@@ -1330,4 +1330,39 @@
+
+
+ Let’s build\ntogether
+ Joining Anytype network means contributing to its story
+
+ Co-create with us
+ Stay closely connected with our team and community. Join calls with the team, influence Anytype\'s evolution, and have your say on features.
+
+ Gain Benefits
+ Our members have unique identity on Anytype Network, more storage, shared spaces and members per space for extensive collaboration.
+
+ Support the Vision
+ Your contribution supports our independent team and endorses our vision︎ of a user-driven, secure, and collaborative digital environment.
+
+ Invest in Connectivity
+ Our software is free by design, but we thrive on the network that connects us all. Support us, and you\'re investing in the very infrastructure that keeps us united.
+
+ Explorer
+ Dive into the network and enjoy the thrill of one-on-one collaboration
+ Builder
+ Unlock the magic of multi-party collaboration and enjoy top-notch support
+ Co-Creator
+ Support our adventure and unlock exclusive access and perks
+ Custom
+ Membership tailored to your specific needs and preferences
+
+ Learn more
+ Contact
+
+ Membership levels details
+ Privacy policy
+ Terms and conditions
+ Would you like to use Anytype for business, education, etc.?
+ Please let us know here.
+
\ No newline at end of file
diff --git a/payments/src/main/java/com/anytypeio/anytype/screens/InfoCard.kt b/payments/src/main/java/com/anytypeio/anytype/screens/InfoCard.kt
new file mode 100644
index 0000000000..3749b65dda
--- /dev/null
+++ b/payments/src/main/java/com/anytypeio/anytype/screens/InfoCard.kt
@@ -0,0 +1,134 @@
+package com.anytypeio.anytype.screens
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.anytypeio.anytype.core_ui.R
+import com.anytypeio.anytype.core_ui.views.BodyBold
+import com.anytypeio.anytype.core_ui.views.Relations2
+
+@Composable
+fun InfoCard(
+ image: Int,
+ gradient: Brush,
+ title: String,
+ subtitle: String,
+) {
+ val configuration = LocalConfiguration.current
+
+ Column(
+ modifier = Modifier
+ .height(284.dp)
+ .background(color = colorResource(id = R.color.shape_tertiary)),
+ horizontalAlignment = Alignment.CenterHorizontally
+ ) {
+ Box(
+ modifier = Modifier
+ .fillMaxWidth()
+ .height(136.dp)
+ .background(gradient)
+ .verticalScroll(rememberScrollState())
+ ) {
+ Image(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(top = 32.dp),
+ painter = painterResource(id = image),
+ contentDescription = "Main payments image"
+ )
+ }
+ Spacer(modifier = Modifier.height(24.dp))
+ Text(
+ modifier = Modifier
+ .fillMaxWidth()
+ .verticalScroll(rememberScrollState()),
+ text = title,
+ color = colorResource(id = R.color.text_primary),
+ style = BodyBold,
+ textAlign = TextAlign.Center
+ )
+ Text(
+ modifier = Modifier
+ .padding(start = 32.dp, end = 32.dp, top = 6.dp)
+ .verticalScroll(rememberScrollState()),
+ text = subtitle,
+ color = colorResource(id = R.color.text_primary),
+ style = Relations2,
+ textAlign = TextAlign.Center
+ )
+ }
+}
+
+@Composable
+fun infoCardsState() = listOf(
+ InfoCardState(
+ image = R.drawable.payments_card_0,
+ title = stringResource(id = R.string.payments_card_text_1),
+ subtitle = stringResource(id = R.string.payments_card_description_1),
+ gradient = Brush.verticalGradient(
+ colors = listOf(
+ Color(0xFFCFF6CF),
+ Color.Transparent
+ )
+ )
+ ),
+ InfoCardState(
+ image = R.drawable.payments_card_1,
+ title = stringResource(id = R.string.payments_card_text_2),
+ subtitle = stringResource(id = R.string.payments_card_description_2),
+ gradient = Brush.verticalGradient(
+ colors = listOf(
+ Color(0xFFFEF2C6),
+ Color.Transparent
+ )
+ )
+ ),
+ InfoCardState(
+ image = R.drawable.payments_card_2,
+ title = stringResource(id = R.string.payments_card_text_3),
+ subtitle = stringResource(id = R.string.payments_card_description_3),
+ gradient = Brush.verticalGradient(
+ colors = listOf(
+ Color(0xFFFFEBEB),
+ Color.Transparent
+ )
+ )
+ ),
+ InfoCardState(
+ image = R.drawable.payments_card_3,
+ title = stringResource(id = R.string.payments_card_text_4),
+ subtitle = stringResource(id = R.string.payments_card_description_4),
+ gradient = Brush.verticalGradient(
+ colors = listOf(
+ Color(0xFFEBEDFE),
+ Color.Transparent
+ )
+ )
+ )
+)
+
+data class InfoCardState(
+ val image: Int,
+ val title: String,
+ val subtitle: String,
+ val gradient: Brush
+)
\ No newline at end of file
diff --git a/payments/src/main/java/com/anytypeio/anytype/screens/MainPaymensScreen.kt b/payments/src/main/java/com/anytypeio/anytype/screens/MainPaymensScreen.kt
index 5255f050f0..555aa1396f 100644
--- a/payments/src/main/java/com/anytypeio/anytype/screens/MainPaymensScreen.kt
+++ b/payments/src/main/java/com/anytypeio/anytype/screens/MainPaymensScreen.kt
@@ -1,13 +1,29 @@
package com.anytypeio.anytype.screens
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
+import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
@@ -17,12 +33,28 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
+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.em
+import androidx.compose.ui.unit.sp
import com.anytypeio.anytype.core_ui.R
+import com.anytypeio.anytype.core_ui.foundation.Divider
import com.anytypeio.anytype.core_ui.foundation.Dragger
-import com.anytypeio.anytype.core_ui.views.Title1
+import com.anytypeio.anytype.core_ui.foundation.noRippleThrottledClickable
+import com.anytypeio.anytype.core_ui.views.BodyRegular
+import com.anytypeio.anytype.core_ui.views.Caption1Regular
+import com.anytypeio.anytype.core_ui.views.Relations2
+import com.anytypeio.anytype.core_ui.views.fontRiccioneRegular
import com.anytypeio.anytype.viewmodel.PaymentsState
+import com.anytypeio.anytype.viewmodel.TierState
@Composable
fun MainPaymentsScreen(state: PaymentsState) {
@@ -40,14 +72,28 @@ fun MainPaymentsScreen(state: PaymentsState) {
modifier = Modifier
.fillMaxSize()
.padding(bottom = 20.dp)
+ .verticalScroll(rememberScrollState())
) {
- Header(state = state)
+ if (state is PaymentsState.Success) {
+ Header(state = state)
+ Spacer(modifier = Modifier.height(32.dp))
+ InfoCards()
+ Tiers(state = state)
+ Spacer(modifier = Modifier.height(32.dp))
+ LinkButton(text = stringResource(id = R.string.payments_member_link), action = {})
+ Divider()
+ LinkButton(text = stringResource(id = R.string.payments_privacy_link), action = {})
+ Divider()
+ LinkButton(text = stringResource(id = R.string.payments_terms_link), action = {})
+ Spacer(modifier = Modifier.height(32.dp))
+ BottomText()
+ }
}
}
}
@Composable
-private fun Header(state: PaymentsState) {
+private fun Header(state: PaymentsState.Success) {
// Dragger at the top, centered
Box(
@@ -63,14 +109,166 @@ private fun Header(state: PaymentsState) {
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
- .verticalScroll(rememberScrollState())
) {
Text(
- modifier = Modifier.fillMaxWidth(),
- text = "Let's build together",
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(start = 20.dp, end = 20.dp, top = 37.dp),
+ text = stringResource(id = R.string.payments_header),
color = colorResource(id = R.color.text_primary),
- style = Title1,
+ style = headerTextStyle,
textAlign = TextAlign.Center
)
}
-}
\ No newline at end of file
+
+ Box(
+ modifier = Modifier
+ .fillMaxWidth()
+ .wrapContentHeight()
+ ) {
+ Text(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(start = 60.dp, end = 60.dp, top = 7.dp),
+ text = stringResource(id = R.string.payments_subheader),
+ color = colorResource(id = R.color.text_primary),
+ style = Relations2,
+ textAlign = TextAlign.Center
+ )
+ }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun Tiers(state: PaymentsState.Success) {
+ val itemsScroll = rememberLazyListState(initialFirstVisibleItemIndex = 1)
+ LazyRow(
+ state = itemsScroll,
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(top = 32.dp),
+ horizontalArrangement = Arrangement.spacedBy(20.dp),
+ contentPadding = PaddingValues(start = 20.dp, end = 20.dp),
+ flingBehavior = rememberSnapFlingBehavior(lazyListState = itemsScroll)
+ ) {
+ itemsIndexed(state.tiers) { index, tier ->
+ TierByType(tier = tier)
+ }
+ }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun InfoCards() {
+ val cards = infoCardsState()
+ val pagerState = rememberPagerState {
+ cards.size
+ }
+ val dotCurrentColor = colorResource(id = R.color.glyph_button)
+ val dotColor = colorResource(id = R.color.glyph_inactive)
+ Box(modifier = Modifier) {
+ HorizontalPager(state = pagerState) { index ->
+ val card = cards[index]
+ InfoCard(
+ gradient = card.gradient,
+ title = card.title,
+ subtitle = card.subtitle,
+ image = card.image
+ )
+ }
+ Row(
+ Modifier
+ .fillMaxWidth()
+ .align(Alignment.BottomCenter)
+ .padding(bottom = 10.dp),
+ horizontalArrangement = Arrangement.Center
+ ) {
+ repeat(cards.size) { iteration ->
+ val color =
+ if (pagerState.currentPage == iteration) dotCurrentColor else dotColor
+ Box(
+ modifier = Modifier
+ .padding(horizontal = 5.dp)
+ .background(color, CircleShape)
+ .size(6.dp)
+ )
+ }
+ }
+ }
+}
+
+@Composable
+fun LinkButton(text: String, action: () -> Unit) {
+ Box(
+ modifier = Modifier
+ .height(52.dp)
+ .fillMaxWidth()
+ .padding(horizontal = 20.dp)
+ .noRippleThrottledClickable { action.invoke() }
+ ) {
+ Text(
+ modifier = Modifier
+ .fillMaxWidth()
+ .align(Alignment.CenterStart),
+ text = text,
+ style = BodyRegular,
+ color = colorResource(id = R.color.text_primary)
+ )
+ Image(
+ modifier = Modifier
+ .wrapContentSize()
+ .align(Alignment.CenterEnd),
+ painter = painterResource(id = R.drawable.ic_web_link),
+ contentDescription = "web link icon"
+ )
+ }
+}
+
+@Composable
+fun BottomText() {
+ val start = stringResource(id = R.string.payments_let_us_link_start)
+ val end = stringResource(id = R.string.payments_let_us_link_end)
+ val buildString = buildAnnotatedString {
+ append(start)
+ append(" ")
+ append(end)
+ pushStringAnnotation(
+ tag = "link", annotation = "www.anytype.io"
+ )
+ addStyle(
+ style = SpanStyle(textDecoration = TextDecoration.Underline),
+ start = start.length + 1,
+ end = start.length + 1 + end.length
+ )
+ pop()
+ }
+ Text(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 20.dp)
+ .wrapContentHeight(),
+ text = buildString,
+ style = Caption1Regular,
+ color = colorResource(id = R.color.text_primary)
+ )
+}
+
+@Preview
+@Composable
+fun MainPaymentsScreenPreview() {
+ val tiers = listOf(
+ TierState.Explorer("999", isCurrent = true),
+ TierState.Builder("999", isCurrent = false),
+ TierState.CoCreator("999", isCurrent = false),
+ TierState.Custom("999", isCurrent = false)
+ )
+ MainPaymentsScreen(PaymentsState.Success(tiers))
+}
+
+val headerTextStyle = TextStyle(
+ fontFamily = fontRiccioneRegular,
+ fontWeight = FontWeight.W400,
+ fontSize = 48.sp,
+ lineHeight = 48.sp,
+ letterSpacing = (-0.010833).em
+)
\ No newline at end of file
diff --git a/payments/src/main/java/com/anytypeio/anytype/screens/Tier.kt b/payments/src/main/java/com/anytypeio/anytype/screens/Tier.kt
new file mode 100644
index 0000000000..76d783621b
--- /dev/null
+++ b/payments/src/main/java/com/anytypeio/anytype/screens/Tier.kt
@@ -0,0 +1,200 @@
+package com.anytypeio.anytype.screens
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+import com.anytypeio.anytype.core_ui.R
+import com.anytypeio.anytype.core_ui.foundation.noRippleThrottledClickable
+import com.anytypeio.anytype.core_ui.views.ButtonPrimary
+import com.anytypeio.anytype.core_ui.views.ButtonSize
+import com.anytypeio.anytype.core_ui.views.Caption1Regular
+import com.anytypeio.anytype.core_ui.views.fontInterSemibold
+import com.anytypeio.anytype.viewmodel.TierState
+
+@Composable
+private fun Tier(
+ title: String,
+ subTitle: String,
+ price: String,
+ colorGradient: Color,
+ radialGradient: Color,
+ icon: Int,
+ buttonText: String,
+ onClick: () -> Unit
+) {
+ val brush = Brush.verticalGradient(
+ listOf(
+ colorGradient,
+ Color.Transparent
+ )
+ )
+
+ Column(
+ modifier = Modifier
+ .width(192.dp)
+ .wrapContentHeight()
+ .background(
+ color = colorResource(id = R.color.shape_tertiary),
+ shape = RoundedCornerShape(16.dp)
+ )
+ .noRippleThrottledClickable { onClick() }
+ ) {
+ Box(
+ modifier = Modifier
+ .fillMaxWidth()
+ .height(80.dp)
+ .background(brush = brush, shape = RoundedCornerShape(16.dp)),
+ contentAlignment = androidx.compose.ui.Alignment.BottomStart
+ ) {
+ Icon(
+ modifier = Modifier
+ .padding(start = 16.dp),
+ painter = painterResource(id = icon),
+ contentDescription = "logo",
+ tint = radialGradient
+ )
+ }
+ Text(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(start = 17.dp, top = 10.dp),
+ text = title,
+ color = colorResource(id = R.color.text_primary),
+ style = titleTextStyle,
+ textAlign = TextAlign.Start
+ )
+ Text(
+ modifier = Modifier
+ .fillMaxWidth()
+ .height(96.dp)
+ .padding(start = 16.dp, end = 16.dp, top = 5.dp),
+ text = subTitle,
+ color = colorResource(id = R.color.text_primary),
+ style = Caption1Regular,
+ textAlign = TextAlign.Start
+ )
+ PriceOrOption()
+ ButtonPrimary(
+ text = buttonText,
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 16.dp),
+ onClick = { /*TODO*/ },
+ size = ButtonSize.Small
+ )
+ Spacer(modifier = Modifier.height(10.dp))
+ }
+}
+
+@Composable
+fun PriceOrOption() {
+ Text(
+ modifier = Modifier.padding(start = 16.dp),
+ text = "9.99",
+ style = titleTextStyle,
+ color = colorResource(id = R.color.text_primary)
+ )
+}
+
+@Composable
+fun TierByType(tier: TierState) {
+ when (tier) {
+ is TierState.Builder -> {
+ Tier(
+ title = stringResource(id = R.string.payments_tier_builder),
+ subTitle = stringResource(id = R.string.payments_tier_builder_description),
+ price = tier.price,
+ colorGradient = Color(0xFFE4E7FF),
+ radialGradient = Color(0xFFA5AEFF),
+ icon = R.drawable.logo_builder,
+ buttonText = stringResource(id = R.string.payments_button_learn),
+ onClick = { /*TODO*/ }
+ )
+ }
+
+ is TierState.CoCreator -> {
+ Tier(
+ title = stringResource(id = R.string.payments_tier_cocreator),
+ subTitle = stringResource(id = R.string.payments_tier_cocreator_description),
+ price = tier.price,
+ colorGradient = Color(0xFFFBEAEA),
+ radialGradient = Color(0xFFF05F5F),
+ icon = R.drawable.logo_co_creator,
+ buttonText = stringResource(id = R.string.payments_button_learn),
+ onClick = { /*TODO*/ }
+ )
+ }
+
+ is TierState.Custom -> {
+ Tier(
+ title = stringResource(id = R.string.payments_tier_custom),
+ subTitle = stringResource(id = R.string.payments_tier_custom_description),
+ price = tier.price,
+ colorGradient = Color(0xFFFBEAFF),
+ radialGradient = Color(0xFFFE86DE3),
+ icon = R.drawable.logo_custom,
+ buttonText = stringResource(id = R.string.payments_button_learn),
+ onClick = { /*TODO*/ }
+ )
+ }
+
+ is TierState.Explorer -> {
+ Tier(
+ title = stringResource(id = R.string.payments_tier_explorer),
+ subTitle = stringResource(id = R.string.payments_tier_explorer_description),
+ price = tier.price,
+ colorGradient = Color(0xFFCFFAFF),
+ radialGradient = Color(0xFF24BFD4),
+ icon = R.drawable.logo_explorer,
+ buttonText = stringResource(id = R.string.payments_button_learn),
+ onClick = { /*TODO*/ }
+ )
+ }
+ }
+}
+
+@Preview
+@Composable
+fun TierPreview() {
+ Tier(
+ title = "Explorer",
+ subTitle = "Dive into the network and enjoy the thrill of one-on-one collaboration",
+ price = "9.99",
+ buttonText = "Subscribe",
+ onClick = {},
+ icon = R.drawable.logo_co_creator,
+ colorGradient = Color(0xFFCFF6CF),
+ radialGradient = Color(0xFF24BFD4)
+ )
+}
+
+val titleTextStyle = TextStyle(
+ fontFamily = fontInterSemibold,
+ fontWeight = FontWeight.W600,
+ fontSize = 17.sp,
+ lineHeight = 24.sp,
+ letterSpacing = (-0.024).em
+)
\ No newline at end of file
diff --git a/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsState.kt b/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsState.kt
index 422a4b736d..51c044af56 100644
--- a/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsState.kt
+++ b/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsState.kt
@@ -2,6 +2,29 @@ package com.anytypeio.anytype.viewmodel
sealed class PaymentsState {
object Loading : PaymentsState()
- object Error : PaymentsState()
- object Success : PaymentsState()
+ data class Success(val tiers: List) : PaymentsState()
+}
+
+sealed class TierState {
+ abstract val isCurrent: Boolean
+
+ data class Explorer(
+ val price: String,
+ override val isCurrent: Boolean
+ ) : TierState()
+
+ data class Builder(
+ val price: String,
+ override val isCurrent: Boolean
+ ) : TierState()
+
+ data class CoCreator(
+ val price: String,
+ override val isCurrent: Boolean
+ ) : TierState()
+
+ data class Custom(
+ val price: String,
+ override val isCurrent: Boolean
+ ) : TierState()
}
\ No newline at end of file
diff --git a/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsViewModel.kt b/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsViewModel.kt
index 9c08884a79..0e6f7b190c 100644
--- a/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsViewModel.kt
+++ b/payments/src/main/java/com/anytypeio/anytype/viewmodel/PaymentsViewModel.kt
@@ -13,6 +13,14 @@ class PaymentsViewModel(
init {
Timber.d("PaymentsViewModel created")
+ viewState.value = PaymentsState.Success(
+ listOf(
+ TierState.Explorer("Free", true),
+ TierState.Builder("$9.99/mo", false),
+ TierState.CoCreator("$19.99/mo", false),
+ TierState.Custom("$29.99/mo", false)
+ )
+ )
}
interface PaymentsNavigation {