Skip to content

Commit 92810a2

Browse files
JorgeMucientesJorgeMucientes
authored
Merge pull request #10685 from woocommerce/issue/10684-ad-destination-screen
Blaze: Ad destination screen
2 parents 579cfc1 + 480c291 commit 92810a2

7 files changed

+234
-9
lines changed

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/destination/BlazeCampaignCreationAdDestinationFragment.kt

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
package com.woocommerce.android.ui.blaze.creation.destination
2+
3+
import android.os.Bundle
4+
import android.view.LayoutInflater
5+
import android.view.View
6+
import android.view.ViewGroup
7+
import androidx.fragment.app.viewModels
8+
import androidx.navigation.fragment.findNavController
9+
import com.woocommerce.android.ui.base.BaseFragment
10+
import com.woocommerce.android.ui.compose.composeView
11+
import com.woocommerce.android.ui.main.AppBarStatus
12+
import com.woocommerce.android.viewmodel.MultiLiveEvent
13+
import dagger.hilt.android.AndroidEntryPoint
14+
15+
@AndroidEntryPoint
16+
class BlazeCampaignCreationAdDestinationFragment : BaseFragment() {
17+
private val viewModel: BlazeCampaignCreationAdDestinationViewModel by viewModels()
18+
19+
override val activityAppBarStatus: AppBarStatus
20+
get() = AppBarStatus.Hidden
21+
22+
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
23+
return composeView {
24+
BlazeCampaignCreationAdDestinationScreen(viewModel)
25+
}
26+
}
27+
28+
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
29+
handleEvents()
30+
handleResults()
31+
}
32+
33+
private fun handleEvents() {
34+
viewModel.event.observe(viewLifecycleOwner) { event ->
35+
when (event) {
36+
is MultiLiveEvent.Event.Exit -> findNavController().navigateUp()
37+
}
38+
}
39+
}
40+
41+
private fun handleResults() {
42+
/* TODO */
43+
}
44+
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/destination/BlazeCampaignCreationAdDestinationScreen.kt

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
package com.woocommerce.android.ui.blaze.creation.destination
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.material.Divider
10+
import androidx.compose.material.MaterialTheme
11+
import androidx.compose.material.Scaffold
12+
import androidx.compose.material.Text
13+
import androidx.compose.material.icons.Icons.Filled
14+
import androidx.compose.material.icons.filled.ArrowBack
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.runtime.livedata.observeAsState
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.res.colorResource
19+
import androidx.compose.ui.res.dimensionResource
20+
import androidx.compose.ui.res.stringResource
21+
import androidx.compose.ui.text.style.TextOverflow
22+
import com.woocommerce.android.R
23+
import com.woocommerce.android.ui.blaze.creation.destination.BlazeCampaignCreationAdDestinationViewModel.ViewState
24+
import com.woocommerce.android.ui.compose.component.Toolbar
25+
import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews
26+
import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
27+
28+
@Composable
29+
fun BlazeCampaignCreationAdDestinationScreen(viewModel: BlazeCampaignCreationAdDestinationViewModel) {
30+
viewModel.viewState.observeAsState().value?.let { previewState ->
31+
AdDestinationScreen(
32+
previewState,
33+
viewModel::onBackPressed,
34+
viewModel::onUrlPropertyTapped,
35+
viewModel::onParameterPropertyTapped
36+
)
37+
}
38+
}
39+
40+
@Composable
41+
fun AdDestinationScreen(
42+
viewState: ViewState,
43+
onBackPressed: () -> Unit,
44+
onUrlPropertyTapped: () -> Unit,
45+
onParametersPropertyTapped: () -> Unit
46+
) {
47+
Scaffold(
48+
topBar = {
49+
Toolbar(
50+
title = stringResource(id = R.string.blaze_campaign_preview_details_destination_url),
51+
onNavigationButtonClick = onBackPressed,
52+
navigationIcon = Filled.ArrowBack
53+
)
54+
},
55+
modifier = Modifier.background(MaterialTheme.colors.surface)
56+
) { paddingValues ->
57+
Column(
58+
Modifier
59+
.background(MaterialTheme.colors.surface)
60+
.padding(paddingValues)
61+
.fillMaxSize()
62+
) {
63+
AdDestinationProperty(
64+
title = stringResource(id = R.string.blaze_campaign_edit_ad_destination_url_property_title),
65+
value = viewState.destinationUrl,
66+
onPropertyTapped = onUrlPropertyTapped
67+
)
68+
Divider()
69+
AdDestinationProperty(
70+
title = stringResource(id = R.string.blaze_campaign_edit_ad_destination_parameters_property_title),
71+
value = viewState.parameters,
72+
onPropertyTapped = onParametersPropertyTapped
73+
)
74+
}
75+
}
76+
}
77+
78+
@Composable
79+
fun AdDestinationProperty(title: String, value: String, onPropertyTapped: () -> Unit) {
80+
Column(
81+
modifier = Modifier
82+
.clickable { onPropertyTapped() }
83+
.padding(dimensionResource(id = R.dimen.major_100))
84+
.fillMaxWidth(1f)
85+
) {
86+
Text(
87+
text = title,
88+
style = MaterialTheme.typography.subtitle1,
89+
color = colorResource(id = R.color.color_on_surface_high)
90+
)
91+
Text(
92+
text = value,
93+
style = MaterialTheme.typography.body2,
94+
color = colorResource(id = R.color.color_on_surface_medium),
95+
maxLines = 3,
96+
overflow = TextOverflow.Ellipsis
97+
)
98+
}
99+
}
100+
101+
@LightDarkThemePreviews
102+
@Composable
103+
fun PreviewAdDestinationScreen() {
104+
WooThemeWithBackground {
105+
AdDestinationScreen(
106+
viewState = ViewState(
107+
destinationUrl = "https://woocommerce.com",
108+
parameters = "utm_source=woocommerce\nutm_medium=android\nutm_campaign=blaze"
109+
),
110+
onBackPressed = {},
111+
onUrlPropertyTapped = {},
112+
onParametersPropertyTapped = {}
113+
)
114+
}
115+
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/destination/BlazeCampaignCreationAdDestinationViewModel.kt

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
package com.woocommerce.android.ui.blaze.creation.destination
2+
3+
import androidx.lifecycle.SavedStateHandle
4+
import androidx.lifecycle.asLiveData
5+
import com.woocommerce.android.R
6+
import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.Exit
7+
import com.woocommerce.android.viewmodel.ResourceProvider
8+
import com.woocommerce.android.viewmodel.ScopedViewModel
9+
import dagger.hilt.android.lifecycle.HiltViewModel
10+
import kotlinx.coroutines.flow.MutableStateFlow
11+
import javax.inject.Inject
12+
13+
@HiltViewModel
14+
class BlazeCampaignCreationAdDestinationViewModel @Inject constructor(
15+
savedStateHandle: SavedStateHandle,
16+
resourceProvider: ResourceProvider
17+
) : ScopedViewModel(savedStateHandle) {
18+
private val _viewState = MutableStateFlow(
19+
ViewState(
20+
destinationUrl = resourceProvider.getString(R.string.blaze_campaign_edit_ad_destination_empty_url_message),
21+
parameters = resourceProvider
22+
.getString(R.string.blaze_campaign_edit_ad_destination_empty_parameters_message)
23+
)
24+
)
25+
26+
val viewState = _viewState.asLiveData()
27+
28+
fun onBackPressed() {
29+
triggerEvent(Exit)
30+
}
31+
32+
fun onUrlPropertyTapped() {
33+
/* TODO */
34+
}
35+
36+
fun onParameterPropertyTapped() {
37+
/* TODO */
38+
}
39+
40+
data class ViewState(
41+
val destinationUrl: String,
42+
val parameters: String
43+
)
44+
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/preview/BlazeCampaignCreationPreviewFragment.kt

+5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import com.woocommerce.android.extensions.navigateSafely
1111
import com.woocommerce.android.ui.base.BaseFragment
1212
import com.woocommerce.android.ui.blaze.creation.ad.BlazeCampaignCreationEditAdFragment
1313
import com.woocommerce.android.ui.blaze.creation.ad.BlazeCampaignCreationEditAdViewModel.EditAdResult
14+
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToAdDestinationScreen
1415
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToBudgetScreen
1516
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToEditAdScreen
1617
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToTargetLocationSelectionScreen
@@ -73,6 +74,10 @@ class BlazeCampaignCreationPreviewFragment : BaseFragment() {
7374
event.locations.toTypedArray()
7475
)
7576
)
77+
is NavigateToAdDestinationScreen -> findNavController().navigateSafely(
78+
BlazeCampaignCreationPreviewFragmentDirections
79+
.actionBlazeCampaignCreationPreviewFragmentToBlazeCampaignCreationAdDestinationFragment()
80+
)
7681
}
7782
}
7883
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/preview/BlazeCampaignCreationPreviewViewModel.kt

+12-8
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,10 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
220220
destinationUrl = CampaignDetailItemUi(
221221
displayTitle = resourceProvider.getString(string.blaze_campaign_preview_details_destination_url),
222222
displayValue = targetUrl,
223-
onItemSelected = { /* TODO Add destination url selection */ },
224223
maxLinesValue = 1,
224+
onItemSelected = {
225+
triggerEvent(NavigateToAdDestinationScreen)
226+
}
225227
)
226228
)
227229

@@ -246,13 +248,6 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
246248
startDate = Date().apply { time += BlazeRepository.ONE_DAY_IN_MILLIS }, // By default start tomorrow
247249
)
248250

249-
data class NavigateToEditAdScreen(
250-
val productId: Long,
251-
val tagLine: String,
252-
val description: String,
253-
val campaignImageUrl: String?
254-
) : MultiLiveEvent.Event()
255-
256251
data class CampaignPreviewUiState(
257252
val adDetails: AdDetailsUi,
258253
val campaignDetails: CampaignDetailsUi,
@@ -286,6 +281,8 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
286281

287282
object NavigateToBudgetScreen : MultiLiveEvent.Event()
288283

284+
object NavigateToAdDestinationScreen : MultiLiveEvent.Event()
285+
289286
data class NavigateToTargetSelectionScreen(
290287
val targetType: BlazeTargetType,
291288
val selectedIds: List<String>
@@ -294,4 +291,11 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
294291
data class NavigateToTargetLocationSelectionScreen(
295292
val locations: List<Location>
296293
) : MultiLiveEvent.Event()
294+
295+
data class NavigateToEditAdScreen(
296+
val productId: Long,
297+
val tagLine: String,
298+
val description: String,
299+
val campaignImageUrl: String?
300+
) : MultiLiveEvent.Event()
297301
}

‎WooCommerce/src/main/res/navigation/nav_graph_blaze_campaign_creation.xml

+7
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@
5959
<action
6060
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignTargetSelectionFragment"
6161
app:destination="@id/blazeCampaignTargetSelectionFragment" />
62+
<action
63+
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignCreationAdDestinationFragment"
64+
app:destination="@id/blazeCampaignCreationAdDestinationFragment" />
6265
<action
6366
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignTargetLocationSelectionFragment"
6467
app:destination="@id/blazeCampaignTargetLocationSelectionFragment" />
@@ -107,4 +110,8 @@
107110
android:name="locations"
108111
app:argType="com.woocommerce.android.ui.blaze.Location[]" />
109112
</fragment>
113+
<fragment
114+
android:id="@+id/blazeCampaignCreationAdDestinationFragment"
115+
android:name="com.woocommerce.android.ui.blaze.creation.destination.BlazeCampaignCreationAdDestinationFragment"
116+
android:label="BlazeCampaignCreationAdDestinationFragment" />
110117
</navigation>

‎WooCommerce/src/main/res/values/strings.xml

+7-1
Original file line numberDiff line numberDiff line change
@@ -3882,7 +3882,13 @@
38823882
<string name="blaze_campaign_creation_product_selector_cta_button">Promote</string>
38833883
<string name="blaze_campaign_creation_location_search_message">Start typing country, state or city to see available options</string>
38843884
<string name="blaze_campaign_creation_location_search_failed_message">No location found.\nPlease try again.</string>
3885-
3885+
<!--
3886+
Blaze edit ad destination
3887+
-->
3888+
<string name="blaze_campaign_edit_ad_destination_empty_url_message">Ad link destination</string>
3889+
<string name="blaze_campaign_edit_ad_destination_empty_parameters_message">Enter manually</string>
3890+
<string name="blaze_campaign_edit_ad_destination_url_property_title">Destination URL</string>
3891+
<string name="blaze_campaign_edit_ad_destination_parameters_property_title">URL parameters</string>
38863892
<!--
38873893
Highlights tooltip
38883894
-->

0 commit comments

Comments
 (0)