Skip to content

Commit

Permalink
Merge pull request #10577 from woocommerce/issue/10574-edit-budget-sc…
Browse files Browse the repository at this point in the history
…reen-ui-barebones

Issue/10574 edit budget screen UI barebones
  • Loading branch information
JorgeMucientes authored Jan 23, 2024
2 parents b5232b9 + 0b2f2d8 commit 840f301
Show file tree
Hide file tree
Showing 8 changed files with 182 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
package com.woocommerce.android.ui.blaze.creation.budget

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.viewModels
import androidx.navigation.fragment.findNavController
import com.woocommerce.android.ui.base.BaseFragment
import com.woocommerce.android.ui.compose.composeView
import com.woocommerce.android.ui.main.AppBarStatus
import com.woocommerce.android.viewmodel.MultiLiveEvent
import dagger.hilt.android.AndroidEntryPoint

@AndroidEntryPoint
class BlazeCampaignBudgetFragment : BaseFragment() {
override val activityAppBarStatus: AppBarStatus
get() = AppBarStatus.Hidden

val viewModel: BlazeCampaignBudgetViewModel by viewModels()

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
return composeView {
CampaignBudgetScreen(viewModel)
}
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
setupObservers()
}

private fun setupObservers() {
viewModel.event.observe(viewLifecycleOwner) { event ->
when (event) {
is MultiLiveEvent.Event.Exit -> findNavController().popBackStack()
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
package com.woocommerce.android.ui.blaze.creation.budget

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons.Filled
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import com.woocommerce.android.R.dimen
import com.woocommerce.android.R.string
import com.woocommerce.android.ui.compose.component.Toolbar
import com.woocommerce.android.ui.compose.component.WCColoredButton
import com.woocommerce.android.ui.compose.component.WCModalBottomSheetLayout
import kotlinx.coroutines.launch

@Composable
fun CampaignBudgetScreen(viewModel: BlazeCampaignBudgetViewModel) {
CampaignBudgetScreen(
onBackPressed = viewModel::onBackPressed
)
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun CampaignBudgetScreen(
onBackPressed: () -> Unit
) {
val coroutineScope = rememberCoroutineScope()
val modalSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
confirmValueChange = { it != ModalBottomSheetValue.HalfExpanded }
)
Scaffold(
topBar = {
Toolbar(
title = stringResource(id = string.blaze_campaign_budget_title),
onNavigationButtonClick = onBackPressed,
navigationIcon = Filled.ArrowBack
)
},
modifier = Modifier.background(MaterialTheme.colors.surface)
) { paddingValues ->
WCModalBottomSheetLayout(
sheetState = modalSheetState,
sheetContent = {
DurationSheetContent(
durationInDays = 0,
onApplyTapped = {
coroutineScope.launch { modalSheetState.hide() }
}
)
}
) {
Column(
modifier = Modifier
.padding(paddingValues)
.background(MaterialTheme.colors.surface)
.padding(dimensionResource(id = dimen.major_100))
) {
// Budget content
}
}
}
}

@Composable
private fun DurationSheetContent(
durationInDays: Int,
onApplyTapped: () -> Unit,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier.verticalScroll(rememberScrollState())
) {
Text(text = "Current duration: $durationInDays")
WCColoredButton(onClick = onApplyTapped, text = "Apply")
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
package com.woocommerce.android.ui.blaze.creation.budget

import androidx.lifecycle.SavedStateHandle
import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.Exit
import com.woocommerce.android.viewmodel.ScopedViewModel
import dagger.hilt.android.lifecycle.HiltViewModel
import javax.inject.Inject

@HiltViewModel
class BlazeCampaignBudgetViewModel @Inject constructor(
savedStateHandle: SavedStateHandle,
) : ScopedViewModel(savedStateHandle) {

fun onBackPressed() {
triggerEvent(Exit)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.viewModels
import androidx.navigation.fragment.findNavController
import com.woocommerce.android.extensions.navigateSafely
import com.woocommerce.android.ui.base.BaseFragment
import com.woocommerce.android.ui.compose.composeView
import com.woocommerce.android.ui.main.AppBarStatus
import com.woocommerce.android.viewmodel.MultiLiveEvent
import dagger.hilt.android.AndroidEntryPoint
import ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel
import ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToBudgetScreen

@AndroidEntryPoint
class BlazeCampaignCreationPreviewFragment : BaseFragment() {
Expand All @@ -35,6 +37,10 @@ class BlazeCampaignCreationPreviewFragment : BaseFragment() {
viewModel.event.observe(viewLifecycleOwner) { event ->
when (event) {
is MultiLiveEvent.Event.Exit -> findNavController().popBackStack()
is NavigateToBudgetScreen -> findNavController().navigateSafely(
BlazeCampaignCreationPreviewFragmentDirections
.actionBlazeCampaignCreationPreviewFragmentToBlazeCampaignBudgetFragment()
)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package com.woocommerce.android.ui.blaze.creation.preview

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
Expand Down Expand Up @@ -315,6 +316,7 @@ private fun CampaignPropertyItem(
Row(
modifier = modifier
.fillMaxWidth()
.clickable { item.onItemSelected() }
.padding(
start = 16.dp,
end = 16.dp,
Expand Down Expand Up @@ -365,28 +367,34 @@ fun CampaignScreenPreview() {
budget = CampaignDetailItemUi(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_budget),
displayValue = "140 USD, 7 days from Jan 14",
onItemSelected = {},
),
targetDetails = listOf(
CampaignDetailItemUi(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_language),
displayValue = "English, Spanish",
onItemSelected = {},
),
CampaignDetailItemUi(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_devices),
displayValue = "USA, Poland, Japan",
onItemSelected = {},
),
CampaignDetailItemUi(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_location),
displayValue = "Samsung, Apple, Xiaomi",
onItemSelected = {},
),
CampaignDetailItemUi(
displayTitle = stringResource(R.string.blaze_campaign_preview_details_interests),
displayValue = "Fashion, Clothing, T-shirts",
onItemSelected = {},
),
),
destinationUrl = CampaignDetailItemUi(
displayTitle = "Destination URL",
displayValue = "https://www.myer.com.au/p/white-t-shirt-797334760-797334760",
onItemSelected = {},
maxLinesValue = 1,
)
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,32 +62,38 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
budget = CampaignDetailItemUi(
displayTitle = resourceProvider.getString(R.string.blaze_campaign_preview_details_budget),
displayValue = budget.toDisplayValue(),
onItemSelected = { triggerEvent(NavigateToBudgetScreen) },
),
targetDetails = listOf(
CampaignDetailItemUi(
displayTitle = resourceProvider.getString(R.string.blaze_campaign_preview_details_language),
displayValue = languages.joinToString { it.name }
.ifEmpty { resourceProvider.getString(R.string.blaze_campaign_preview_target_default_value) },
onItemSelected = { /* TODO Add language selection */ },
),
CampaignDetailItemUi(
displayTitle = resourceProvider.getString(R.string.blaze_campaign_preview_details_devices),
displayValue = locations.joinToString { it.name }
.ifEmpty { resourceProvider.getString(R.string.blaze_campaign_preview_target_default_value) },
onItemSelected = { /* TODO Add devices selection */ },
),
CampaignDetailItemUi(
displayTitle = resourceProvider.getString(R.string.blaze_campaign_preview_details_location),
displayValue = devices.joinToString { it.name }
.ifEmpty { resourceProvider.getString(R.string.blaze_campaign_preview_target_default_value) },
onItemSelected = { /* TODO Add location selection */ },
),
CampaignDetailItemUi(
displayTitle = resourceProvider.getString(R.string.blaze_campaign_preview_details_interests),
displayValue = interests.joinToString { it.description }
.ifEmpty { resourceProvider.getString(R.string.blaze_campaign_preview_target_default_value) },
onItemSelected = { /* TODO Add interests selection */ },
),
),
destinationUrl = CampaignDetailItemUi(
displayTitle = resourceProvider.getString(R.string.blaze_campaign_preview_details_destination_url),
displayValue = targetUrl,
onItemSelected = { /* TODO Add destination url selection */ },
maxLinesValue = 1,
)
)
Expand Down Expand Up @@ -127,6 +133,9 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
data class CampaignDetailItemUi(
val displayTitle: String,
val displayValue: String,
val onItemSelected: () -> Unit,
val maxLinesValue: Int? = null,
)

object NavigateToBudgetScreen : MultiLiveEvent.Event()
}
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,12 @@
android:name="productId"
android:defaultValue="-1L"
app:argType="long" />
<action
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignBudgetFragment"
app:destination="@id/blazeCampaignBudgetFragment" />
</fragment>
<fragment
android:id="@+id/blazeCampaignBudgetFragment"
android:name="com.woocommerce.android.ui.blaze.creation.budget.BlazeCampaignBudgetFragment"
android:label="BlazeCampaignBudgetFragment" />
</navigation>
5 changes: 5 additions & 0 deletions WooCommerce/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3838,6 +3838,11 @@
<string name="blaze_campaign_preview_days_duration">%1$s days from %2$s</string>
<string name="blaze_campaign_preview_target_default_value">All</string>

<!--
Blaze campaign preview screen
-->
<string name="blaze_campaign_budget_title">Set your budget</string>

<!--
Blaze other
-->
Expand Down

0 comments on commit 840f301

Please sign in to comment.