Migrate out of time view to compose

CHANGELOG.md

@@ -31,6 +31,7 @@ Line wrap the file at 100 chars.                                              Th
 - Migrate welcome view to compose.
 - Migrate in app notifications to compose.
 - Move out of time evaluation to connect view model.
+- Migrate out of time view to compose.
 
 #### Linux
 - Don't block forwarding of traffic when the split tunnel mark (ct mark) is set.

android/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreenTest.kt

@@ -0,0 +1,172 @@
+package net.mullvad.mullvadvpn.compose.screen
+
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
+import io.mockk.MockKAnnotations
+import io.mockk.mockk
+import io.mockk.verify
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import net.mullvad.mullvadvpn.compose.state.OutOfTimeUiState
+import net.mullvad.mullvadvpn.model.TunnelState
+import net.mullvad.mullvadvpn.viewmodel.OutOfTimeViewModel
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+
+class OutOfTimeScreenTest {
+    @get:Rule val composeTestRule = createComposeRule()
+
+    @Before
+    fun setup() {
+        MockKAnnotations.init(this)
+    }
+
+    @Test
+    fun testDisableSitePayment() {
+        // Arrange
+        composeTestRule.setContent {
+            OutOfTimeScreen(
+                showSitePayment = false,
+                uiState = OutOfTimeUiState(),
+                viewActions = MutableSharedFlow(),
+                onSitePaymentClick = {},
+                onRedeemVoucherClick = {},
+                onSettingsClick = {},
+                onAccountClick = {},
+                openConnectScreen = {},
+                onDisconnectClick = {}
+            )
+        }
+
+        // Assert
+        composeTestRule.apply {
+            onNodeWithText(
+                    "Either buy credit on our website or redeem a voucher.",
+                    substring = true
+                )
+                .assertDoesNotExist()
+            onNodeWithText("Buy credit").assertDoesNotExist()
+        }
+    }
+
+    @Test
+    fun testOpenAccountView() {
+        // Arrange
+        composeTestRule.setContent {
+            OutOfTimeScreen(
+                showSitePayment = true,
+                uiState = OutOfTimeUiState(),
+                viewActions =
+                    MutableStateFlow(OutOfTimeViewModel.ViewAction.OpenAccountView("222")),
+                onSitePaymentClick = {},
+                onRedeemVoucherClick = {},
+                onSettingsClick = {},
+                onAccountClick = {},
+                openConnectScreen = {},
+                onDisconnectClick = {}
+            )
+        }
+
+        // Assert
+        composeTestRule.apply { onNodeWithText("Congrats!").assertDoesNotExist() }
+    }
+
+    @Test
+    fun testOpenConnectScreen() {
+        // Arrange
+        val mockClickListener: () -> Unit = mockk(relaxed = true)
+        composeTestRule.setContent {
+            OutOfTimeScreen(
+                showSitePayment = true,
+                uiState = OutOfTimeUiState(),
+                viewActions = MutableStateFlow(OutOfTimeViewModel.ViewAction.OpenConnectScreen),
+                onSitePaymentClick = {},
+                onRedeemVoucherClick = {},
+                onSettingsClick = {},
+                onAccountClick = {},
+                openConnectScreen = mockClickListener,
+                onDisconnectClick = {}
+            )
+        }
+
+        // Assert
+        verify(exactly = 1) { mockClickListener.invoke() }
+    }
+
+    @Test
+    fun testClickSitePaymentButton() {
+        // Arrange
+        val mockClickListener: () -> Unit = mockk(relaxed = true)
+        composeTestRule.setContent {
+            OutOfTimeScreen(
+                showSitePayment = true,
+                uiState = OutOfTimeUiState(),
+                viewActions = MutableSharedFlow(),
+                onSitePaymentClick = mockClickListener,
+                onRedeemVoucherClick = {},
+                onSettingsClick = {},
+                onAccountClick = {},
+                openConnectScreen = {},
+                onDisconnectClick = {}
+            )
+        }
+
+        // Act
+        composeTestRule.apply { onNodeWithText("Buy credit").performClick() }
+
+        // Assert
+        verify(exactly = 1) { mockClickListener.invoke() }
+    }
+
+    @Test
+    fun testClickRedeemVoucher() {
+        // Arrange
+        val mockClickListener: () -> Unit = mockk(relaxed = true)
+        composeTestRule.setContent {
+            OutOfTimeScreen(
+                showSitePayment = true,
+                uiState = OutOfTimeUiState(),
+                viewActions = MutableSharedFlow(),
+                onSitePaymentClick = {},
+                onRedeemVoucherClick = mockClickListener,
+                onSettingsClick = {},
+                onAccountClick = {},
+                openConnectScreen = {},
+                onDisconnectClick = {}
+            )
+        }
+
+        // Act
+        composeTestRule.apply { onNodeWithText("Redeem voucher").performClick() }
+
+        // Assert
+        verify(exactly = 1) { mockClickListener.invoke() }
+    }
+
+    @Test
+    fun testClickDisconnect() {
+        // Arrange
+        val mockClickListener: () -> Unit = mockk(relaxed = true)
+        composeTestRule.setContent {
+            OutOfTimeScreen(
+                showSitePayment = true,
+                uiState = OutOfTimeUiState(tunnelState = TunnelState.Connecting(null, null)),
+                viewActions = MutableSharedFlow(),
+                onSitePaymentClick = {},
+                onRedeemVoucherClick = {},
+                onSettingsClick = {},
+                onAccountClick = {},
+                openConnectScreen = {},
+                onDisconnectClick = mockClickListener
+            )
+        }
+
+        // Act
+        composeTestRule.apply { onNodeWithText("Disconnect").performClick() }
+
+        // Assert
+        verify(exactly = 1) { mockClickListener.invoke() }
+    }
+}

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt

@@ -0,0 +1,70 @@
+package net.mullvad.mullvadvpn.compose.button
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.constraintlayout.compose.ConstraintLayout
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+
+@Preview
+@Composable
+private fun PreviewExternalActionButton() {
+    AppTheme {
+        ExternalActionButton(onClick = {}, colors = ButtonDefaults.buttonColors(), text = "Button")
+    }
+}
+
+@Composable
+fun ExternalActionButton(
+    onClick: () -> Unit,
+    colors: ButtonColors,
+    text: String,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+) {
+    ActionButton(
+        onClick = onClick,
+        colors = colors,
+        modifier = modifier,
+        isEnabled = isEnabled,
+    ) {
+        ConstraintLayout(modifier = Modifier.fillMaxSize()) {
+            val (title, logo) = createRefs()
+            Text(
+                text = text,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.typography.bodyMedium,
+                modifier =
+                    Modifier.constrainAs(title) {
+                        end.linkTo(logo.start)
+                        centerTo(parent)
+                    }
+            )
+            Image(
+                painter = painterResource(id = R.drawable.icon_extlink),
+                contentDescription = null,
+                modifier =
+                    Modifier.constrainAs(logo) {
+                            centerVerticallyTo(parent)
+                            end.linkTo(parent.end)
+                        }
+                        .padding(horizontal = Dimens.smallPadding)
+                        .alpha(if (isEnabled) AlphaVisible else AlphaDisabled)
+            )
+        }
+    }
+}

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
+    )
+}

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt

@@ -0,0 +1,59 @@
+package net.mullvad.mullvadvpn.compose.button
+
+import androidx.compose.foundation.background
+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
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+
+@Preview
+@Composable
+private fun PreviewSitePaymentButton() {
+    AppTheme {
+        SpacedColumn(
+            spacing = Dimens.cellVerticalSpacing,
+            modifier = Modifier.background(color = MaterialTheme.colorScheme.background)
+        ) {
+            SitePaymentButton(onClick = {}, isEnabled = true)
+            SitePaymentButton(onClick = {}, isEnabled = false)
+        }
+    }
+}
+
+@Composable
+fun SitePaymentButton(
+    onClick: () -> Unit,
+    isEnabled: Boolean,
+    modifier: Modifier = Modifier,
+    background: Color = MaterialTheme.colorScheme.background,
+) {
+    ExternalActionButton(
+        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,
+        text = stringResource(id = R.string.buy_credit)
+    )
+}

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/UriHandlerExtensions.kt

@@ -0,0 +1,12 @@
+package net.mullvad.mullvadvpn.compose.extensions
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.UriHandler
+import androidx.compose.ui.res.stringResource
+import net.mullvad.mullvadvpn.R
+
+@Composable
+fun UriHandler.createOpenAccountPageHook(): (String) -> Unit {
+    val accountUrl = stringResource(id = R.string.account_url)
+    return { token -> this.openUri("$accountUrl?token=$token") }
+}