Skip to content

Commit

Permalink
mend
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rawa
Rawa committed Sep 11, 2023
1 parent e3deb33 commit c2b2781
Showing 1 changed file with 145 additions and 117 deletions.
262 changes: 145 additions & 117 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,45 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.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.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
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.component.CopyAnimatedIconButton
import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
import net.mullvad.mullvadvpn.lib.common.util.SdkUtils
import net.mullvad.mullvadvpn.compose.util.createCopyToClipboardHandle
import net.mullvad.mullvadvpn.lib.common.util.groupWithSpaces
import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
import net.mullvad.mullvadvpn.lib.theme.AppTheme
import net.mullvad.mullvadvpn.lib.theme.Dimens
import net.mullvad.mullvadvpn.ui.extension.copyToClipboard
import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel

@Preview
Expand Down Expand Up @@ -73,7 +76,7 @@ fun WelcomeScreen(
openConnectScreen: () -> Unit
) {
val context = LocalContext.current
LaunchedEffect(key1 = Unit) {
LaunchedEffect(Unit) {
viewActions.collect { viewAction ->
when (viewAction) {
is WelcomeViewModel.ViewAction.OpenAccountView ->
Expand All @@ -83,6 +86,8 @@ fun WelcomeScreen(
}
}
val scrollState = rememberScrollState()
val snackbarHostState = remember { SnackbarHostState() }

ScaffoldWithTopBar(
topBarColor =
if (uiState.tunnelState.isSecured()) {
Expand All @@ -105,141 +110,164 @@ fun WelcomeScreen(
}
.copy(alpha = AlphaTopBar),
onSettingsClicked = onSettingsClick,
onAccountClicked = onAccountClick
onAccountClicked = onAccountClick,
snackbarHostState = snackbarHostState
) {
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.Start,
modifier =
Modifier.fillMaxSize()
.verticalScroll(scrollState)
.drawVerticalScrollbar(scrollState)
.background(color = MaterialTheme.colorScheme.primary)
.padding(it)
) {
Text(
text = stringResource(id = R.string.congrats),
modifier =
Modifier.padding(
// Welcome info area
WelcomeInfo(snackbarHostState, uiState, showSitePayment)

Spacer(modifier = Modifier.weight(1f))

// Payment button area
PaymentPanel(showSitePayment, onSitePaymentClick, onRedeemVoucherClick)
}
}
}

@Composable
private fun WelcomeInfo(
snackbarHostState: SnackbarHostState,
uiState: WelcomeUiState,
showSitePayment: Boolean
) {
Column(modifier = Modifier.padding(horizontal = Dimens.sideMargin)) {
Text(
text = stringResource(id = R.string.congrats),
modifier =
Modifier.fillMaxWidth()
.padding(
top = Dimens.screenVerticalMargin,
start = Dimens.sideMargin,
end = Dimens.sideMargin
),
style = MaterialTheme.typography.headlineLarge,
color = MaterialTheme.colorScheme.onPrimary
)
Text(
text = stringResource(id = R.string.here_is_your_account_number),
modifier =
Modifier.padding(
style = MaterialTheme.typography.headlineLarge,
color = MaterialTheme.colorScheme.onPrimary,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Text(
text = stringResource(id = R.string.here_is_your_account_number),
modifier =
Modifier.fillMaxWidth()
.padding(
vertical = Dimens.smallPadding,
horizontal = Dimens.sideMargin
),
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onPrimary
)
Text(
text = uiState.accountNumber?.groupWithSpaces() ?: "",
modifier =
Modifier.fillMaxWidth()
.wrapContentHeight()
.then(
uiState.accountNumber?.let {
Modifier.clickable {
context.copyToClipboard(
content = uiState.accountNumber,
clipboardLabel =
context.getString(R.string.mullvad_account_number)
)
SdkUtils.showCopyToastIfNeeded(
context,
context.getString(R.string.copied_mullvad_account_number)
)
}
}
?: Modifier
)
.padding(vertical = Dimens.smallPadding, horizontal = Dimens.sideMargin),
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onPrimary
)
Text(
text =
buildString {
append(stringResource(id = R.string.pay_to_start_using))
if (showSitePayment) {
append(" ")
append(stringResource(id = R.string.add_time_to_account))
}
},
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onPrimary
)

AccountNumberRow(snackbarHostState, uiState)

Text(
text =
buildString {
append(stringResource(id = R.string.pay_to_start_using))
if (showSitePayment) {
append(" ")
append(stringResource(id = R.string.add_time_to_account))
}
},
modifier = Modifier.padding(top = Dimens.smallPadding, bottom = Dimens.verticalSpace),
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onPrimary
)
}
}

@Composable
private fun AccountNumberRow(snackbarHostState: SnackbarHostState, uiState: WelcomeUiState) {
val copiedAccountNumberMessage = stringResource(id = R.string.copied_mullvad_account_number)
val copyToClipboard = createCopyToClipboardHandle(snackbarHostState = snackbarHostState)
val onCopyToClipboard = {
copyToClipboard(uiState.accountNumber ?: "", copiedAccountNumberMessage)
}

Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier =
Modifier.fillMaxWidth()
.clickable(onClick = onCopyToClipboard)
.padding(start = Dimens.smallPadding)
) {
Text(
text = uiState.accountNumber?.groupWithSpaces() ?: "",
modifier = Modifier.weight(1f).padding(vertical = Dimens.smallPadding),
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onPrimary
)

CopyAnimatedIconButton(onCopyToClipboard)
}
}

@Composable
private fun PaymentPanel(
showSitePayment: Boolean,
onSitePaymentClick: () -> Unit,
onRedeemVoucherClick: () -> Unit
) {
Column(
modifier =
Modifier.fillMaxWidth()
.padding(top = Dimens.mediumPadding)
.background(color = MaterialTheme.colorScheme.background)
) {
Spacer(modifier = Modifier.padding(top = Dimens.screenVerticalMargin))
if (showSitePayment) {
ActionButton(
onClick = onSitePaymentClick,
modifier =
Modifier.padding(
top = Dimens.smallPadding,
start = Dimens.sideMargin,
end = Dimens.sideMargin,
bottom = Dimens.verticalSpace
bottom = Dimens.screenVerticalMargin
),
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onPrimary
)
Spacer(modifier = Modifier.weight(1f))
// Payment button area
Column(
modifier =
Modifier.fillMaxWidth()
.padding(top = Dimens.mediumPadding)
.background(color = MaterialTheme.colorScheme.background)
colors =
ButtonDefaults.buttonColors(
contentColor = MaterialTheme.colorScheme.onPrimary,
containerColor = MaterialTheme.colorScheme.surface
)
) {
Spacer(modifier = Modifier.padding(top = Dimens.screenVerticalMargin))
if (showSitePayment) {
ActionButton(
onClick = onSitePaymentClick,
Box(modifier = Modifier.fillMaxSize()) {
Text(
text = stringResource(id = R.string.buy_credit),
textAlign = TextAlign.Center,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.align(Alignment.Center)
)
Image(
painter = painterResource(id = R.drawable.icon_extlink),
contentDescription = null,
modifier =
Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
bottom = Dimens.screenVerticalMargin
),
colors =
ButtonDefaults.buttonColors(
contentColor = MaterialTheme.colorScheme.onPrimary,
containerColor = MaterialTheme.colorScheme.surface
)
) {
Box(modifier = Modifier.fillMaxSize()) {
Text(
text = stringResource(id = R.string.buy_credit),
textAlign = TextAlign.Center,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.align(Alignment.Center)
)
Image(
painter = painterResource(id = R.drawable.icon_extlink),
contentDescription = null,
modifier =
Modifier.align(Alignment.CenterEnd)
.padding(horizontal = Dimens.smallPadding)
)
}
}
Modifier.align(Alignment.CenterEnd)
.padding(horizontal = Dimens.smallPadding)
)
}
ActionButton(
text = stringResource(id = R.string.redeem_voucher),
onClick = onRedeemVoucherClick,
modifier =
Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
bottom = Dimens.screenVerticalMargin
),
colors =
ButtonDefaults.buttonColors(
contentColor = MaterialTheme.colorScheme.onPrimary,
containerColor = MaterialTheme.colorScheme.surface
)
)
}
}

ActionButton(
text = stringResource(id = R.string.redeem_voucher),
onClick = onRedeemVoucherClick,
modifier =
Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
bottom = Dimens.screenVerticalMargin
),
colors =
ButtonDefaults.buttonColors(
contentColor = MaterialTheme.colorScheme.onPrimary,
containerColor = MaterialTheme.colorScheme.surface
)
)
}
}

0 comments on commit c2b2781

Please sign in to comment.