Skip to content

Commit

Permalink
Merge pull request #10685 from woocommerce/issue/10684-ad-destination…
Browse files Browse the repository at this point in the history
…-screen

Blaze: Ad destination screen
  • Loading branch information
JorgeMucientes authored Feb 7, 2024
2 parents 579cfc1 + 480c291 commit 92810a2
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 9 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
package com.woocommerce.android.ui.blaze.creation.destination

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 BlazeCampaignCreationAdDestinationFragment : BaseFragment() {
private val viewModel: BlazeCampaignCreationAdDestinationViewModel by viewModels()

override val activityAppBarStatus: AppBarStatus
get() = AppBarStatus.Hidden

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

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
handleEvents()
handleResults()
}

private fun handleEvents() {
viewModel.event.observe(viewLifecycleOwner) { event ->
when (event) {
is MultiLiveEvent.Event.Exit -> findNavController().navigateUp()
}
}
}

private fun handleResults() {
/* TODO */
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
package com.woocommerce.android.ui.blaze.creation.destination

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Divider
import androidx.compose.material.MaterialTheme
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.runtime.Composable
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import com.woocommerce.android.R
import com.woocommerce.android.ui.blaze.creation.destination.BlazeCampaignCreationAdDestinationViewModel.ViewState
import com.woocommerce.android.ui.compose.component.Toolbar
import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews
import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground

@Composable
fun BlazeCampaignCreationAdDestinationScreen(viewModel: BlazeCampaignCreationAdDestinationViewModel) {
viewModel.viewState.observeAsState().value?.let { previewState ->
AdDestinationScreen(
previewState,
viewModel::onBackPressed,
viewModel::onUrlPropertyTapped,
viewModel::onParameterPropertyTapped
)
}
}

@Composable
fun AdDestinationScreen(
viewState: ViewState,
onBackPressed: () -> Unit,
onUrlPropertyTapped: () -> Unit,
onParametersPropertyTapped: () -> Unit
) {
Scaffold(
topBar = {
Toolbar(
title = stringResource(id = R.string.blaze_campaign_preview_details_destination_url),
onNavigationButtonClick = onBackPressed,
navigationIcon = Filled.ArrowBack
)
},
modifier = Modifier.background(MaterialTheme.colors.surface)
) { paddingValues ->
Column(
Modifier
.background(MaterialTheme.colors.surface)
.padding(paddingValues)
.fillMaxSize()
) {
AdDestinationProperty(
title = stringResource(id = R.string.blaze_campaign_edit_ad_destination_url_property_title),
value = viewState.destinationUrl,
onPropertyTapped = onUrlPropertyTapped
)
Divider()
AdDestinationProperty(
title = stringResource(id = R.string.blaze_campaign_edit_ad_destination_parameters_property_title),
value = viewState.parameters,
onPropertyTapped = onParametersPropertyTapped
)
}
}
}

@Composable
fun AdDestinationProperty(title: String, value: String, onPropertyTapped: () -> Unit) {
Column(
modifier = Modifier
.clickable { onPropertyTapped() }
.padding(dimensionResource(id = R.dimen.major_100))
.fillMaxWidth(1f)
) {
Text(
text = title,
style = MaterialTheme.typography.subtitle1,
color = colorResource(id = R.color.color_on_surface_high)
)
Text(
text = value,
style = MaterialTheme.typography.body2,
color = colorResource(id = R.color.color_on_surface_medium),
maxLines = 3,
overflow = TextOverflow.Ellipsis
)
}
}

@LightDarkThemePreviews
@Composable
fun PreviewAdDestinationScreen() {
WooThemeWithBackground {
AdDestinationScreen(
viewState = ViewState(
destinationUrl = "https://woocommerce.com",
parameters = "utm_source=woocommerce\nutm_medium=android\nutm_campaign=blaze"
),
onBackPressed = {},
onUrlPropertyTapped = {},
onParametersPropertyTapped = {}
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
package com.woocommerce.android.ui.blaze.creation.destination

import androidx.lifecycle.SavedStateHandle
import androidx.lifecycle.asLiveData
import com.woocommerce.android.R
import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.Exit
import com.woocommerce.android.viewmodel.ResourceProvider
import com.woocommerce.android.viewmodel.ScopedViewModel
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import javax.inject.Inject

@HiltViewModel
class BlazeCampaignCreationAdDestinationViewModel @Inject constructor(
savedStateHandle: SavedStateHandle,
resourceProvider: ResourceProvider
) : ScopedViewModel(savedStateHandle) {
private val _viewState = MutableStateFlow(
ViewState(
destinationUrl = resourceProvider.getString(R.string.blaze_campaign_edit_ad_destination_empty_url_message),
parameters = resourceProvider
.getString(R.string.blaze_campaign_edit_ad_destination_empty_parameters_message)
)
)

val viewState = _viewState.asLiveData()

fun onBackPressed() {
triggerEvent(Exit)
}

fun onUrlPropertyTapped() {
/* TODO */
}

fun onParameterPropertyTapped() {
/* TODO */
}

data class ViewState(
val destinationUrl: String,
val parameters: String
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import com.woocommerce.android.extensions.navigateSafely
import com.woocommerce.android.ui.base.BaseFragment
import com.woocommerce.android.ui.blaze.creation.ad.BlazeCampaignCreationEditAdFragment
import com.woocommerce.android.ui.blaze.creation.ad.BlazeCampaignCreationEditAdViewModel.EditAdResult
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToAdDestinationScreen
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToBudgetScreen
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToEditAdScreen
import com.woocommerce.android.ui.blaze.creation.preview.BlazeCampaignCreationPreviewViewModel.NavigateToTargetLocationSelectionScreen
Expand Down Expand Up @@ -73,6 +74,10 @@ class BlazeCampaignCreationPreviewFragment : BaseFragment() {
event.locations.toTypedArray()
)
)
is NavigateToAdDestinationScreen -> findNavController().navigateSafely(
BlazeCampaignCreationPreviewFragmentDirections
.actionBlazeCampaignCreationPreviewFragmentToBlazeCampaignCreationAdDestinationFragment()
)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,10 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
destinationUrl = CampaignDetailItemUi(
displayTitle = resourceProvider.getString(string.blaze_campaign_preview_details_destination_url),
displayValue = targetUrl,
onItemSelected = { /* TODO Add destination url selection */ },
maxLinesValue = 1,
onItemSelected = {
triggerEvent(NavigateToAdDestinationScreen)
}
)
)

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

data class NavigateToEditAdScreen(
val productId: Long,
val tagLine: String,
val description: String,
val campaignImageUrl: String?
) : MultiLiveEvent.Event()

data class CampaignPreviewUiState(
val adDetails: AdDetailsUi,
val campaignDetails: CampaignDetailsUi,
Expand Down Expand Up @@ -286,6 +281,8 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(

object NavigateToBudgetScreen : MultiLiveEvent.Event()

object NavigateToAdDestinationScreen : MultiLiveEvent.Event()

data class NavigateToTargetSelectionScreen(
val targetType: BlazeTargetType,
val selectedIds: List<String>
Expand All @@ -294,4 +291,11 @@ class BlazeCampaignCreationPreviewViewModel @Inject constructor(
data class NavigateToTargetLocationSelectionScreen(
val locations: List<Location>
) : MultiLiveEvent.Event()

data class NavigateToEditAdScreen(
val productId: Long,
val tagLine: String,
val description: String,
val campaignImageUrl: String?
) : MultiLiveEvent.Event()
}
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@
<action
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignTargetSelectionFragment"
app:destination="@id/blazeCampaignTargetSelectionFragment" />
<action
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignCreationAdDestinationFragment"
app:destination="@id/blazeCampaignCreationAdDestinationFragment" />
<action
android:id="@+id/action_blazeCampaignCreationPreviewFragment_to_blazeCampaignTargetLocationSelectionFragment"
app:destination="@id/blazeCampaignTargetLocationSelectionFragment" />
Expand Down Expand Up @@ -107,4 +110,8 @@
android:name="locations"
app:argType="com.woocommerce.android.ui.blaze.Location[]" />
</fragment>
<fragment
android:id="@+id/blazeCampaignCreationAdDestinationFragment"
android:name="com.woocommerce.android.ui.blaze.creation.destination.BlazeCampaignCreationAdDestinationFragment"
android:label="BlazeCampaignCreationAdDestinationFragment" />
</navigation>
8 changes: 7 additions & 1 deletion WooCommerce/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3882,7 +3882,13 @@
<string name="blaze_campaign_creation_product_selector_cta_button">Promote</string>
<string name="blaze_campaign_creation_location_search_message">Start typing country, state or city to see available options</string>
<string name="blaze_campaign_creation_location_search_failed_message">No location found.\nPlease try again.</string>

<!--
Blaze edit ad destination
-->
<string name="blaze_campaign_edit_ad_destination_empty_url_message">Ad link destination</string>
<string name="blaze_campaign_edit_ad_destination_empty_parameters_message">Enter manually</string>
<string name="blaze_campaign_edit_ad_destination_url_property_title">Destination URL</string>
<string name="blaze_campaign_edit_ad_destination_parameters_property_title">URL parameters</string>
<!--
Highlights tooltip
-->
Expand Down

0 comments on commit 92810a2

Please sign in to comment.