Skip to content

Commit

Permalink
Merge pull request #10566 from woocommerce/issue/10551-campaig-previe…
Browse files Browse the repository at this point in the history 
…w-loading

Issue/10551 campaig preview loading
  • Loading branch information
@0nko
0nko authored Jan 18, 2024
2 parents d6dfbc4 + 201706f commit a25900b
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 66 deletions.
201 changes: 135 additions & 66 deletions ...n/com/woocommerce/android/ui/blaze/creation/preview/BlazeCampaignCreationPreviewScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ package com.woocommerce.android.ui.blaze.creation.preview
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
Expand All @@ -11,6 +12,7 @@ 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.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
Expand Down Expand Up @@ -40,58 +42,127 @@ import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.woocommerce.android.R
import com.woocommerce.android.R.string
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.CampaignPreviewUiState
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.CampaignPreviewUiState.CampaignDetailItem
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.CampaignPreviewUiState.CampaignPreviewContent
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.CampaignPreviewUiState.Loading
import com.woocommerce.android.ui.compose.animations.SkeletonView
import com.woocommerce.android.ui.compose.component.Toolbar
import com.woocommerce.android.ui.compose.component.WCColoredButton
import com.woocommerce.android.ui.compose.component.WCTextButton
import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews
import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground

@Composable
fun BlazeCampaignCreationPreviewScreen(viewModel: BlazeCampaignCreationPreviewViewModel) {
viewModel.viewState.observeAsState().value?.let { previewState ->
WooThemeWithBackground {
Scaffold(
topBar = {
Toolbar(
title = stringResource(id = R.string.blaze_campaign_screen_fragment_title),
onNavigationButtonClick = { /*TODO*/ },
navigationIcon = Filled.ArrowBack
BlazeCampaignCreationPreviewScreen(previewState)
}
}

@Composable
private fun BlazeCampaignCreationPreviewScreen(previewState: CampaignPreviewUiState) {
Scaffold(
topBar = {
Toolbar(
title = stringResource(id = R.string.blaze_campaign_screen_fragment_title),
onNavigationButtonClick = { /*TODO*/ },
navigationIcon = Filled.ArrowBack
)
},
modifier = Modifier.background(MaterialTheme.colors.surface)
) { paddingValues ->
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.fillMaxSize()
.padding(paddingValues)
.background(color = MaterialTheme.colors.surface)
) {
when (previewState) {
is Loading -> CampaignPreviewLoading()
is CampaignPreviewContent -> CampaignPreviewContent(state = previewState)
}

Spacer(modifier = Modifier.height(16.dp))
Divider()
WCColoredButton(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.padding(bottom = 8.dp),
text = stringResource(id = R.string.blaze_campaign_preview_details_confirm_details_button),
onClick = { /*TODO*/ },
enabled = previewState !is Loading
)
}
}
}

@Composable
private fun CampaignPreviewLoading(
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(16.dp)
.clip(RoundedCornerShape(8.dp))
.background(color = colorResource(id = R.color.blaze_campaign_preview_header_background)),
horizontalAlignment = Alignment.CenterHorizontally
) {
Card(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
shape = RoundedCornerShape(8.dp)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
SkeletonView(
modifier = Modifier
.fillMaxWidth()
.height(276.dp)
)
SkeletonView(
modifier = Modifier
.width(120.dp)
.height(8.dp)
)
Row(verticalAlignment = Alignment.Bottom) {
SkeletonView(
modifier = Modifier
.weight(1f)
.height(16.dp)
)
},
modifier = Modifier.background(MaterialTheme.colors.surface)
) { paddingValues ->
when (previewState) {
is Loading -> LoadingPreview()
is CampaignPreviewContent -> CampaignPreviewContent(
state = previewState,
Spacer(modifier = Modifier.width(24.dp))
SkeletonView(
modifier = Modifier
.padding(paddingValues)
.background(color = MaterialTheme.colors.surface)
.width(80.dp)
.height(24.dp)
)
}
}
}
WCTextButton(
modifier = Modifier.padding(bottom = 8.dp),
onClick = { /* No action expected for disabled button */ },
enabled = false,
) {
Text(stringResource(id = R.string.blaze_campaign_preview_edit_ad_button))
}
}
}

@Composable
fun LoadingPreview() {
TODO("Not yet implemented")
}

@Composable
fun CampaignPreviewContent(
state: CampaignPreviewContent,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier
.verticalScroll(rememberScrollState())
.fillMaxSize()
) {
Column(modifier = modifier.fillMaxWidth()) {
CampaignHeader(
state = state,
modifier = Modifier
Expand All @@ -106,16 +177,6 @@ fun CampaignPreviewContent(
.fillMaxWidth()
.padding(16.dp)
)
Spacer(modifier = Modifier.height(16.dp))
Divider()
WCColoredButton(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.padding(bottom = 8.dp),
text = stringResource(id = R.string.blaze_campaign_preview_details_confirm_details_button),
onClick = { /*TODO*/ },
)
}
}

Expand Down Expand Up @@ -286,37 +347,45 @@ private fun CampaignPropertyItem(
@LightDarkThemePreviews
@Composable
fun CampaignScreenPreview() {
CampaignPreviewContent(
productId = 123,
title = "Get the latest white t-shirts",
tagLine = "From 45.00 USD",
campaignImageUrl = "https://rb.gy/gmjuwb",
budget = CampaignDetailItem(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_budget),
displayValue = "140 USD, 7 days from Jan 14",
),
audienceDetails = listOf(
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_language),
displayValue = "English, Spanish",
),
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_devices),
displayValue = "USA, Poland, Japan",
BlazeCampaignCreationPreviewScreen(
CampaignPreviewContent(
productId = 123,
title = "Get the latest white t-shirts",
tagLine = "From 45.00 USD",
campaignImageUrl = "https://rb.gy/gmjuwb",
budget = CampaignDetailItem(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_budget),
displayValue = "140 USD, 7 days from Jan 14",
),
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_location),
displayValue = "Samsung, Apple, Xiaomi",
audienceDetails = listOf(
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_language),
displayValue = "English, Spanish",
),
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_devices),
displayValue = "USA, Poland, Japan",
),
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_location),
displayValue = "Samsung, Apple, Xiaomi",
),
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_interests),
displayValue = "Fashion, Clothing, T-shirts",
),
),
CampaignDetailItem(
displayTitle = stringResource(string.blaze_campaign_preview_details_interests),
displayValue = "Fashion, Clothing, T-shirts",
),
),
destinationUrl = CampaignDetailItem(
displayTitle = "Destination URL",
displayValue = "https://www.myer.com.au/p/white-t-shirt-797334760-797334760",
maxLinesValue = 1,
destinationUrl = CampaignDetailItem(
displayTitle = "Destination URL",
displayValue = "https://www.myer.com.au/p/white-t-shirt-797334760-797334760",
maxLinesValue = 1,
)
)
)
}

@LightDarkThemePreviews
@Composable
fun CampaignLoadingScreenPreview() {
CampaignPreviewLoading()
}
4 changes: 4 additions & 0 deletions ...om/woocommerce/android/ui/blaze/creation/preview/BlazeCampaignCreationPreviewViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import com.woocommerce.android.viewmodel.ResourceProvider
import com.woocommerce.android.viewmodel.ScopedViewModel
import com.woocommerce.android.viewmodel.navArgs
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import javax.inject.Inject

Expand All @@ -26,6 +27,8 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(

init {
launch {
@Suppress("MagicNumber")
delay(5000)
val product = productDetailRepository.getProduct(navArgs.productId)
_viewState.value = CampaignPreviewUiState.CampaignPreviewContent(
productId = product?.remoteId ?: -1,
Expand Down Expand Up @@ -66,6 +69,7 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
sealed interface CampaignPreviewUiState {
object Loading : CampaignPreviewUiState
data class CampaignPreviewContent(
val isLoading: Boolean = false,
val productId: Long,
val title: String,
val tagLine: String,
Expand Down

0 comments on commit a25900b

Please sign in to comment.