Shared, Android: Subscription annual plan (#1177)

^ALTAPPS-1344

androidHyperskillApp/src/main/java/org/hyperskill/app/android/paywall/ui/PaywallContent.kt

@@ -17,6 +17,10 @@ import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
@@ -31,11 +35,13 @@ import org.hyperskill.app.R
 import org.hyperskill.app.android.core.extensions.compose.plus
 import org.hyperskill.app.android.core.view.ui.widget.compose.HyperskillButton
 import org.hyperskill.app.android.core.view.ui.widget.compose.HyperskillTheme
+import org.hyperskill.app.paywall.presentation.PaywallFeature
 
 @Composable
 fun PaywallContent(
     buyButtonText: String,
-    priceText: String?,
+    products: List<PaywallFeature.ViewStateContent.SubscriptionProduct>,
+    onProductClick: (String) -> Unit,
     onTermsOfServiceClick: () -> Unit,
     onBuySubscriptionClick: () -> Unit,
     modifier: Modifier = Modifier,
@@ -49,7 +55,9 @@ fun PaywallContent(
             .windowInsetsPadding(WindowInsets.safeDrawing)
     ) {
         Column(
-            modifier = Modifier.weight(1f)
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxWidth()
         ) {
             Image(
                 painter = painterResource(id = org.hyperskill.app.android.R.drawable.img_paywall),
@@ -64,10 +72,12 @@ fun PaywallContent(
             )
             Spacer(modifier = Modifier.height(24.dp))
             SubscriptionDetails()
-            Spacer(modifier = Modifier.height(32.dp))
-            if (priceText != null) {
-                SubscriptionPrice(priceText)
-            }
+            Spacer(modifier = Modifier.height(24.dp))
+            SubscriptionProducts(
+                products = products,
+                onProdutsClick = onProductClick
+            )
+            Spacer(modifier = Modifier.height(24.dp))
         }
         Column {
             HyperskillButton(
@@ -87,23 +97,27 @@ fun PaywallContent(
 }
 
 @Composable
-private fun SubscriptionPrice(
-    priceText: String,
+private fun SubscriptionProducts(
+    products: List<PaywallFeature.ViewStateContent.SubscriptionProduct>,
+    onProdutsClick: (String) -> Unit,
     modifier: Modifier = Modifier
 ) {
     Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(8.dp)
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+        modifier = modifier
     ) {
-        Text(
-            text = stringResource(id = R.string.paywall_android_subscription_duration),
-            style = MaterialTheme.typography.subtitle1,
-            fontWeight = FontWeight.Medium
-        )
-        Text(
-            text = priceText,
-            style = MaterialTheme.typography.body2
-        )
+        products.forEach { option ->
+            key(option.productId) {
+                SubscriptionProduct(
+                    product = option,
+                    onClick = remember {
+                        {
+                            onProdutsClick(option.productId)
+                        }
+                    }
+                )
+            }
+        }
     }
 }
 
@@ -124,9 +138,15 @@ private fun TermsOfService(
 @Composable
 fun PaywallContentPreview() {
     HyperskillTheme {
+        val options by remember {
+            mutableStateOf(
+                PaywallPreviewDefaults.subscriptionProducts
+            )
+        }
         PaywallContent(
             buyButtonText = PaywallPreviewDefaults.BUY_BUTTON_TEXT,
-            priceText = PaywallPreviewDefaults.PRICE_TEXT,
+            products = options,
+            onProductClick = { },
             onTermsOfServiceClick = {},
             onBuySubscriptionClick = {}
         )

androidHyperskillApp/src/main/java/org/hyperskill/app/android/paywall/ui/PaywallDefaults.kt

@@ -9,10 +9,8 @@ import org.hyperskill.app.R
 
 object PaywallDefaults {
     val ContentPadding = PaddingValues(
-        start = 24.dp,
-        end = 20.dp,
-        top = 24.dp,
-        bottom = 32.dp
+        horizontal = 20.dp,
+        vertical = 24.dp
     )
 
     val BackgroundColor: Color

androidHyperskillApp/src/main/java/org/hyperskill/app/android/paywall/ui/PaywallPreviewDefaults.kt

@@ -1,6 +1,23 @@
 package org.hyperskill.app.android.paywall.ui
 
+import org.hyperskill.app.paywall.presentation.PaywallFeature
+
 object PaywallPreviewDefaults {
-    const val BUY_BUTTON_TEXT = "Subscribe"
-    const val PRICE_TEXT = "$11.99 / month"
+    const val BUY_BUTTON_TEXT = "Start now"
+    val subscriptionProducts = listOf(
+        PaywallFeature.ViewStateContent.SubscriptionProduct(
+            productId = "1",
+            title = "Annual 100$",
+            subtitle = "$8.33 / month",
+            isBestValue = true,
+            isSelected = true
+        ),
+        PaywallFeature.ViewStateContent.SubscriptionProduct(
+            productId = "2",
+            title = "Monthly",
+            subtitle = "$12 / month",
+            isBestValue = false,
+            isSelected = false
+        )
+    )
 }

androidHyperskillApp/src/main/java/org/hyperskill/app/android/paywall/ui/PaywallScreen.kt

@@ -58,6 +58,7 @@ fun PaywallScreen(
     PaywallScreen(
         viewState = state,
         onBackClick = onBackClick,
+        onProductClick = viewModel::onOptionClick,
         onBuySubscriptionClick = remember(activity) {
             {
                 viewModel.onBuySubscriptionClick(activity)
@@ -73,6 +74,7 @@ fun PaywallScreen(
 fun PaywallScreen(
     viewState: ViewState,
     onBackClick: () -> Unit,
+    onProductClick: (String) -> Unit,
     onBuySubscriptionClick: () -> Unit,
     onCloseClick: () -> Unit,
     onRetryLoadingClick: () -> Unit,
@@ -106,7 +108,8 @@ fun PaywallScreen(
             is ViewStateContent.Content ->
                 PaywallContent(
                     buyButtonText = contentState.buyButtonText,
-                    priceText = contentState.priceText,
+                    products = contentState.subscriptionProducts,
+                    onProductClick = onProductClick,
                     onBuySubscriptionClick = onBuySubscriptionClick,
                     onTermsOfServiceClick = onTermsOfServiceClick,
                     padding = padding
@@ -192,16 +195,14 @@ private class PaywallPreviewProvider : PreviewParameterProvider<ViewState> {
                 isToolbarVisible = true,
                 contentState = ViewStateContent.Content(
                     buyButtonText = PaywallPreviewDefaults.BUY_BUTTON_TEXT,
-                    priceText = "$11.99 / month",
-                    trialText = null
+                    subscriptionProducts = PaywallPreviewDefaults.subscriptionProducts
                 )
             ),
             ViewState(
                 isToolbarVisible = false,
                 contentState = ViewStateContent.Content(
                     buyButtonText = PaywallPreviewDefaults.BUY_BUTTON_TEXT,
-                    priceText = PaywallPreviewDefaults.PRICE_TEXT,
-                    trialText = null
+                    subscriptionProducts = PaywallPreviewDefaults.subscriptionProducts
                 )
             ),
             ViewState(
@@ -237,6 +238,7 @@ fun PaywallScreenPreview(
         PaywallScreen(
             viewState = viewState,
             onBackClick = {},
+            onProductClick = {},
             onBuySubscriptionClick = {},
             onCloseClick = {},
             onRetryLoadingClick = {},

androidHyperskillApp/src/main/java/org/hyperskill/app/android/paywall/ui/SubscriptionDetails.kt

@@ -27,15 +27,15 @@ fun SubscriptionDetails(
         modifier = modifier,
         verticalArrangement = Arrangement.spacedBy(6.dp)
     ) {
-        SubscriptionOption(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_1))
-        SubscriptionOption(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_2))
-        SubscriptionOption(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_3))
-        SubscriptionOption(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_4))
+        SubscriptionDetail(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_1))
+        SubscriptionDetail(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_2))
+        SubscriptionDetail(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_3))
+        SubscriptionDetail(text = stringResource(id = SharedR.string.mobile_only_subscription_feature_4))
     }
 }
 
 @Composable
-fun SubscriptionOption(
+fun SubscriptionDetail(
     text: String,
     modifier: Modifier = Modifier
 ) {