Skip to content

Commit

Permalink
Merge branch 'trunk' into issue/9959-blaze-no-campaign
Browse files Browse the repository at this point in the history
# Conflicts:
#	WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/MyStoreBlazeView.kt
#	WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/MyStoreBlazeViewModel.kt
#	WooCommerce/src/main/kotlin/com/woocommerce/android/ui/mystore/MyStoreFragment.kt
  • Loading branch information
hichamboushaba committed Oct 18, 2023
2 parents c1318f3 + 0d26828 commit 956e4ad
Show file tree
Hide file tree
Showing 16 changed files with 622 additions and 222 deletions.
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
),
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,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.MyStoreBlazeCampaignState
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 @@ -182,13 +178,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 @@ -205,89 +195,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 @@ -305,9 +212,20 @@ fun MyStoreBlazeViewCampaignPreview() {
campaign = 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
),
),
),
onCampaignClicked = {},
onViewAllCampaignsClicked = {},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package com.woocommerce.android.ui.blaze

import androidx.annotation.ColorRes
import androidx.annotation.StringRes
import androidx.lifecycle.SavedStateHandle
import androidx.lifecycle.asLiveData
import com.woocommerce.android.R
Expand Down Expand Up @@ -84,9 +82,16 @@ class MyStoreBlazeViewModel @Inject constructor(
imgUrl = "https://hips.hearstapps.com/hmg-prod/images/gh-082420-ghi-best-sofas-1598293488.png",
),
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
)
)
),
onCampaignClicked = { /* TODO */ },
onViewAllCampaignsClicked = { /* TODO */ },
Expand Down Expand Up @@ -126,45 +131,6 @@ class MyStoreBlazeViewModel @Inject constructor(
) : MyStoreBlazeCampaignState
}

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

data class BlazeCampaignUi(
val product: BlazeProductUi,
val status: CampaignStatusUi,
val impressions: Int,
val clicks: Int,
val budget: 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
),
}

data class LaunchBlazeCampaignCreation(val url: String, val source: BlazeFlowSource) : MultiLiveEvent.Event()
object ShowAllCampaigns : MultiLiveEvent.Event()
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
package com.woocommerce.android.ui.blaze.campaigs

import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.woocommerce.android.R
import com.woocommerce.android.ui.blaze.BlazeCampaignUi
import com.woocommerce.android.ui.compose.component.ProductThumbnail
import com.woocommerce.android.ui.compose.component.WCTag

@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) {
ProductThumbnail(imageUrl = campaign.product.imgUrl)
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))) {
campaign.stats.forEach {
CampaignStat(
statName = stringResource(id = it.name),
statValue = it.value
)
}
}
}
}
}
}

@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,
)
}
}
Loading

0 comments on commit 956e4ad

Please sign in to comment.