Skip to content

Commit

Permalink
Merge pull request #9969 from woocommerce/feature/9963-blaze-campaign…
Browse files Browse the repository at this point in the history 
…-list

Feature/9963 blaze campaign list
  • Loading branch information
@JorgeMucientes
JorgeMucientes authored Oct 18, 2023
2 parents d80bb9d + 159841d commit 0d26828
Show file tree
Hide file tree
Showing 13 changed files with 523 additions and 215 deletions.
48 changes: 48 additions & 0 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/BlazeUiModels.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
package com.woocommerce.android.ui.blaze

import androidx.annotation.ColorRes
import androidx.annotation.StringRes
import com.woocommerce.android.R

data class BlazeProductUi(
val name: String,
val imgUrl: String
)

data class BlazeCampaignUi(
val product: BlazeProductUi,
val status: CampaignStatusUi,
val stats: List<BlazeCampaignStat>,
)

data class BlazeCampaignStat(
@StringRes val name: Int,
val value: Int
)

enum class CampaignStatusUi(
@StringRes val statusDisplayText: Int,
@ColorRes val textColor: Int,
@ColorRes val backgroundColor: Int,
) {
InModeration(
statusDisplayText = R.string.blaze_campaign_status_in_moderation,
textColor = R.color.blaze_campaign_status_in_moderation_text,
backgroundColor = R.color.blaze_campaign_status_in_moderation_background
),
Active(
statusDisplayText = R.string.blaze_campaign_status_active,
textColor = R.color.blaze_campaign_status_active_text,
backgroundColor = R.color.blaze_campaign_status_active_background
),
Completed(
statusDisplayText = R.string.blaze_campaign_status_completed,
textColor = R.color.blaze_campaign_status_rejected_text,
backgroundColor = R.color.blaze_campaign_status_rejected_background
),
Rejected(
statusDisplayText = R.string.blaze_campaign_status_rejected,
textColor = R.color.blaze_campaign_status_completed_text,
backgroundColor = R.color.blaze_campaign_status_completed_background
),
}
116 changes: 17 additions & 99 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/MyStoreBlazeView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,10 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.woocommerce.android.R
import com.woocommerce.android.ui.blaze.MyStoreBlazeViewModel.BlazeCampaignUi
import com.woocommerce.android.ui.blaze.MyStoreBlazeViewModel.BlazeProductUi
import com.woocommerce.android.ui.blaze.MyStoreBlazeViewModel.CampaignStatusUi
import com.woocommerce.android.ui.blaze.MyStoreBlazeViewModel.MyStoreBlazeUi
import com.woocommerce.android.ui.compose.component.ListItemImage
import com.woocommerce.android.ui.compose.component.WCTag
import com.woocommerce.android.ui.blaze.campaigs.BlazeCampaignItem
import com.woocommerce.android.ui.compose.component.ProductThumbnail
import com.woocommerce.android.ui.compose.component.WCTextButton

@Composable
Expand Down Expand Up @@ -165,13 +161,7 @@ fun BlazeProductItem(
.padding(dimensionResource(id = R.dimen.major_100))
) {
Row(verticalAlignment = Alignment.CenterVertically) {
ListItemImage(
imageUrl = product.imgUrl,
modifier = Modifier
.size(dimensionResource(id = R.dimen.major_300))
.clip(shape = RoundedCornerShape(dimensionResource(id = R.dimen.minor_100))),
placeHolderDrawableId = R.drawable.ic_product,
)
ProductThumbnail(imageUrl = product.imgUrl)
Text(
modifier = Modifier
.padding(start = dimensionResource(id = R.dimen.major_100))
Expand All @@ -188,89 +178,6 @@ fun BlazeProductItem(
}
}

@Composable
fun BlazeCampaignItem(
campaign: BlazeCampaignUi,
onCampaignClicked: () -> Unit,
modifier: Modifier = Modifier,
) {
Box(
modifier = modifier
.border(
width = dimensionResource(id = R.dimen.minor_10),
color = colorResource(R.color.divider_color),
shape = RoundedCornerShape(dimensionResource(id = R.dimen.minor_100))
)
.clip(shape = RoundedCornerShape(dimensionResource(id = R.dimen.minor_100)))
.clickable { onCampaignClicked() }
.padding(dimensionResource(id = R.dimen.major_100))
) {
Row(verticalAlignment = Alignment.Top) {
ListItemImage(
imageUrl = campaign.product.imgUrl,
modifier = Modifier
.size(dimensionResource(id = R.dimen.major_275))
.clip(shape = RoundedCornerShape(dimensionResource(id = R.dimen.minor_100))),
placeHolderDrawableId = R.drawable.ic_product,
)
Column(
modifier = Modifier
.padding(start = dimensionResource(id = R.dimen.major_100))
.weight(1f),
) {
WCTag(
text = stringResource(id = campaign.status.statusDisplayText).uppercase(),
textColor = colorResource(id = campaign.status.textColor),
backgroundColor = colorResource(id = campaign.status.backgroundColor),
textStyle = MaterialTheme.typography.caption.copy(
letterSpacing = 1.5.sp
)
)
Text(
modifier = Modifier
.padding(top = dimensionResource(id = R.dimen.minor_50)),
text = campaign.product.name,
style = MaterialTheme.typography.subtitle1,
fontWeight = FontWeight.Bold,
)
Row(modifier = Modifier.padding(top = dimensionResource(id = R.dimen.major_100))) {
CampaignStat(
statName = stringResource(id = R.string.blaze_campaign_status_impressions),
statValue = campaign.impressions
)
CampaignStat(
statName = stringResource(id = R.string.blaze_campaign_status_clicks),
statValue = campaign.clicks
)
}
}
}
}
}

@Composable
private fun CampaignStat(
statName: String,
statValue: Int,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier.padding(end = dimensionResource(id = R.dimen.major_100))
) {
Text(
text = statName,
style = MaterialTheme.typography.body2,
color = colorResource(id = R.color.color_on_surface_medium_selector),
)
Text(
modifier = Modifier
.padding(top = dimensionResource(id = R.dimen.minor_50)),
text = statValue.toString(),
style = MaterialTheme.typography.h6,
)
}
}

@ExperimentalFoundationApi
@Preview(name = "dark", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(name = "light", uiMode = Configuration.UI_MODE_NIGHT_NO)
Expand All @@ -290,9 +197,20 @@ fun MyStoreBlazeViewPreview() {
blazeActiveCampaign = BlazeCampaignUi(
product = product,
status = CampaignStatusUi.Active,
impressions = 100,
clicks = 10,
budget = 1000
stats = listOf(
BlazeCampaignStat(
name = R.string.blaze_campaign_status_impressions,
value = 100
),
BlazeCampaignStat(
name = R.string.blaze_campaign_status_clicks,
value = 10
),
BlazeCampaignStat(
name = R.string.blaze_campaign_status_budget,
value = 1000
),
),
),
),
onCreateCampaignClicked = {},
Expand Down
84 changes: 25 additions & 59 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/MyStoreBlazeViewModel.kt
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
package com.woocommerce.android.ui.blaze

import android.os.Parcelable
import androidx.annotation.ColorRes
import androidx.annotation.StringRes
import androidx.lifecycle.SavedStateHandle
import androidx.lifecycle.asLiveData
import androidx.lifecycle.viewModelScope
import com.woocommerce.android.R
import com.woocommerce.android.util.FeatureFlag
import com.woocommerce.android.R.string
import com.woocommerce.android.ui.blaze.CampaignStatusUi.Active
import com.woocommerce.android.util.FeatureFlag.BLAZE_ITERATION_2
import com.woocommerce.android.viewmodel.MultiLiveEvent
import com.woocommerce.android.viewmodel.ScopedViewModel
import com.woocommerce.android.viewmodel.getStateFlow
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.parcelize.Parcelize
import kotlinx.coroutines.flow.MutableStateFlow
import javax.inject.Inject

@HiltViewModel
class MyStoreBlazeViewModel @Inject constructor(
savedStateHandle: SavedStateHandle,
) : ScopedViewModel(savedStateHandle) {
private val _blazeCampaignState =
savedStateHandle.getStateFlow(
scope = viewModelScope,
initialValue = MyStoreBlazeUi(
isVisible = FeatureFlag.BLAZE_ITERATION_2.isEnabled(),
MutableStateFlow(
MyStoreBlazeUi(
isVisible = BLAZE_ITERATION_2.isEnabled(),
product = BlazeProductUi(
name = "Product name",
imgUrl = "https://hips.hearstapps.com/hmg-prod/images/gh-082420-ghi-best-sofas-1598293488.png",
Expand All @@ -32,61 +28,31 @@ class MyStoreBlazeViewModel @Inject constructor(
name = "Product name",
imgUrl = "https://hips.hearstapps.com/hmg-prod/images/gh-082420-ghi-best-sofas-1598293488.png",
),
status = CampaignStatusUi.Active,
impressions = 100,
clicks = 10,
budget = 1000
status = Active,
stats = listOf(
BlazeCampaignStat(
name = string.blaze_campaign_status_impressions,
value = 100
),
BlazeCampaignStat(
name = string.blaze_campaign_status_clicks,
value = 10
)
),
)
)
)
val blazeCampaignState = _blazeCampaignState.asLiveData()

@Parcelize
fun onShowAllCampaignsClicked() {
triggerEvent(ShowAllCampaigns)
}

data class MyStoreBlazeUi(
val isVisible: Boolean,
val product: BlazeProductUi,
val blazeActiveCampaign: BlazeCampaignUi?
) : Parcelable

@Parcelize
data class BlazeProductUi(
val name: String,
val imgUrl: String
) : Parcelable
)

@Parcelize
data class BlazeCampaignUi(
val product: BlazeProductUi,
val status: CampaignStatusUi,
val impressions: Int,
val clicks: Int,
val budget: Int
) : Parcelable

enum class CampaignStatusUi(
@StringRes val statusDisplayText: Int,
@ColorRes val textColor: Int,
@ColorRes val backgroundColor: Int,
) {
InModeration(
statusDisplayText = R.string.blaze_campaign_status_in_moderation,
textColor = R.color.blaze_campaign_status_in_moderation_text,
backgroundColor = R.color.blaze_campaign_status_in_moderation_background
),
Active(
statusDisplayText = R.string.blaze_campaign_status_active,
textColor = R.color.blaze_campaign_status_active_text,
backgroundColor = R.color.blaze_campaign_status_active_background
),
Completed(
statusDisplayText = R.string.blaze_campaign_status_completed,
textColor = R.color.blaze_campaign_status_rejected_text,
backgroundColor = R.color.blaze_campaign_status_rejected_background
),
Rejected(
statusDisplayText = R.string.blaze_campaign_status_rejected,
textColor = R.color.blaze_campaign_status_completed_text,
backgroundColor = R.color.blaze_campaign_status_completed_background
),
}
object ShowAllCampaigns : MultiLiveEvent.Event()
}
Loading

0 comments on commit 0d26828

Please sign in to comment.