Blaze: Ad destination screen

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

@@ -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 */
+    }
+}

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

@@ -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 = {}
+        )
+    }
+}

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

@@ -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
+    )
+}

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

@@ -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
@@ -73,6 +74,10 @@ class BlazeCampaignCreationPreviewFragment : BaseFragment() {
                             event.locations.toTypedArray()
                         )
                 )
+                is NavigateToAdDestinationScreen -> findNavController().navigateSafely(
+                    BlazeCampaignCreationPreviewFragmentDirections
+                        .actionBlazeCampaignCreationPreviewFragmentToBlazeCampaignCreationAdDestinationFragment()
+                )
             }
         }
     }

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

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

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

@@ -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" />
@@ -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>

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

@@ -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
     -->