Add redeem voucher button

3 files changed, 59 insertions, 22 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
new file mode 100644
index 0000000000..41ab2cf876
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
@@ -0,0 +1,54 @@
+package net.mullvad.mullvadvpn.compose.button
+
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.SpacedColumn
+import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+
+@Preview
+@Composable
+private fun PreviewRedeemVoucherButton() {
+    AppTheme {
+        SpacedColumn {
+            RedeemVoucherButton(onClick = {}, isEnabled = true)
+            RedeemVoucherButton(onClick = {}, isEnabled = false)
+        }
+    }
+}
+
+@Composable
+fun RedeemVoucherButton(
+    modifier: Modifier = Modifier,
+    background: Color = MaterialTheme.colorScheme.background,
+    onClick: () -> Unit,
+    isEnabled: Boolean
+) {
+    ActionButton(
+        text = stringResource(id = R.string.redeem_voucher),
+        onClick = onClick,
+        modifier = modifier,
+        colors =
+            ButtonDefaults.buttonColors(
+                contentColor = MaterialTheme.colorScheme.onPrimary,
+                containerColor = MaterialTheme.colorScheme.surface,
+                disabledContentColor =
+                    MaterialTheme.colorScheme.onPrimary
+                        .copy(alpha = AlphaInactive)
+                        .compositeOver(background),
+                disabledContainerColor =
+                    MaterialTheme.colorScheme.surface
+                        .copy(alpha = AlphaDisabled)
+                        .compositeOver(background)
+            ),
+        isEnabled = isEnabled
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
index a4004db78e..a9ab126dae 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
@@ -26,13 +26,12 @@ import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.asSharedFlow
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.ActionButton
+import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton
 import net.mullvad.mullvadvpn.compose.button.SitePaymentButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.extensions.createOpenAccountPageHook
 import net.mullvad.mullvadvpn.compose.state.OutOfTimeUiState
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -203,8 +202,7 @@ fun OutOfTimeScreen(
                         )
                 )
             }
-            ActionButton(
-                text = stringResource(id = R.string.redeem_voucher),
+            RedeemVoucherButton(
                 onClick = onRedeemVoucherClick,
                 modifier =
                     Modifier.padding(
@@ -212,15 +210,6 @@ fun OutOfTimeScreen(
                         end = Dimens.sideMargin,
                         bottom = Dimens.screenVerticalMargin
                     ),
-                colors =
-                    ButtonDefaults.buttonColors(
-                        contentColor = MaterialTheme.colorScheme.onPrimary,
-                        containerColor = MaterialTheme.colorScheme.surface,
-                        disabledContentColor =
-                            MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaInactive),
-                        disabledContainerColor =
-                            MaterialTheme.colorScheme.surface.copy(alpha = AlphaDisabled)
-                    ),
                 isEnabled = uiState.tunnelState.enableRedeemButton()
             )
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
index ac8addaa51..b7dc83ac48 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -25,7 +24,7 @@ import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.asSharedFlow
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.button.ActionButton
+import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton
 import net.mullvad.mullvadvpn.compose.button.SitePaymentButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
@@ -198,19 +197,14 @@ fun WelcomeScreen(
                             )
                     )
                 }
-                ActionButton(
-                    text = stringResource(id = R.string.redeem_voucher),
+                RedeemVoucherButton(
                     onClick = onRedeemVoucherClick,
+                    isEnabled = true,
                     modifier =
                         Modifier.padding(
                             start = Dimens.sideMargin,
                             end = Dimens.sideMargin,
                             bottom = Dimens.screenVerticalMargin
-                        ),
-                    colors =
-                        ButtonDefaults.buttonColors(
-                            contentColor = MaterialTheme.colorScheme.onPrimary,
-                            containerColor = MaterialTheme.colorScheme.surface
                         )
                 )
             }