Skip to content

[Site Design Revamp] Recommends designs based on chosen vertical #16510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ovitrif merged 21 commits into from
May 13, 2022
Merged

[Site Design Revamp] Recommends designs based on chosen vertical #16510

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f502a2a
Updates FluxC reference
antonis May 10, 2022
a6f506f
Pass selected vertical to the design picker
antonis May 10, 2022
85d9074
Recommend designs based on the selected vertical
antonis May 10, 2022
7142471
Merge branch 'feature/site-design-revamp' into task/16503-recommend-v…
antonis May 10, 2022
9677bb9
Extracts the recommendation logic to a separate file
antonis May 10, 2022
fe387f4
Tests the recommended designs logic
antonis May 10, 2022
0052838
Adds a mechanism for randomising the order of layouts in specific cat…
antonis May 12, 2022
29060b9
Randomises the order of site designs except for the recommended category
antonis May 12, 2022
69d9798
Also save the ordered layouts per category for efficiency
antonis May 12, 2022
9daa723
Unit tests for which categories should be randomised
antonis May 12, 2022
c349fca
Merge branch 'feature/site-design-revamp' into task/16503-recommend-v…
antonis May 12, 2022
11ff1a1
Merge branch 'task/16503-recommend-vertical-designs' into task/16506-…
antonis May 12, 2022
e0980a7
Unselect the layout after the choose action if fired
antonis May 12, 2022
2fa545a
Merge branch 'task/16503-recommend-vertical-designs' into task/16506-…
antonis May 12, 2022
3ddba5e
Adds recommended property in the enhanced_site_creation_site_design_s…
antonis May 13, 2022
e80ad38
Merge branch 'feature/site-design-revamp' into task/16503-recommend-v…
antonis May 13, 2022
319e4c5
Merge branch 'task/16503-recommend-vertical-designs' into task/16506-…
antonis May 13, 2022
62812e7
Merge branch 'task/16503-recommend-vertical-designs' into task/16528-…
antonis May 13, 2022
91c1cab
Hides keyboard on back
antonis May 13, 2022
1020c4d
Merge pull request #16531 from wordpress-mobile/task/16506-randomise-…
ovitrif May 13, 2022
8a16b16
Merge pull request #16538 from wordpress-mobile/task/16528-track-reco…
ovitrif May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Adds recommended property in the enhanced_site_creation_site_design_s… 
…elected event
  • Loading branch information
@antonis
antonis committed May 13, 2022
commit 3ddba5e31a9ac6dec06dc1f6dd592aadfdcbf025
1 change: 1 addition & 0 deletions WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerUiState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ sealed class LayoutPickerUiState(
override val isToolbarVisible: Boolean = false,
val selectedCategoriesSlugs: ArrayList<String> = arrayListOf(),
val selectedLayoutSlug: String? = null,
val isSelectedLayoutRecommended: Boolean = false,
val loadedThumbnailSlugs: ArrayList<String> = arrayListOf(),
val categories: List<CategoryListItemUiState> = listOf(),
val layoutCategories: List<LayoutCategoryUiState> = listOf(),
Expand Down
4 changes: 2 additions & 2 deletions WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ abstract class LayoutPickerViewModel(
mShotPreview = thumbnailPreview,
selected = layout.slug == state.selectedLayoutSlug,
tapOpensPreview = thumbnailTapOpensPreview,
onItemTapped = { onLayoutTapped(layoutSlug = layout.slug) },
onItemTapped = { onLayoutTapped(layoutSlug = layout.slug, category.isRecommended) },
onThumbnailReady = { onThumbnailReady(layoutSlug = layout.slug) }
)
}
Expand All @@ -194,7 +194,7 @@ abstract class LayoutPickerViewModel(
* Layout tapped
* @param layoutSlug the slug of the tapped layout
*/
open fun onLayoutTapped(layoutSlug: String) {
open fun onLayoutTapped(layoutSlug: String, isRecommended: Boolean = false) {
(uiState.value as? Content)?.let { state ->
if (!state.loadedThumbnailSlugs.contains(layoutSlug)) return // No action
if (layoutSlug == state.selectedLayoutSlug) { // deselect
Expand Down
8 changes: 5 additions & 3 deletions WordPress/src/main/java/org/wordpress/android/ui/sitecreation/misc/SiteCreationTracker.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.C
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.FILTER
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.LOCATION
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.PREVIEW_MODE
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.RECOMMENDED
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.SEARCH_TERM
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.SEGMENT_ID
import org.wordpress.android.ui.sitecreation.misc.SiteCreationTracker.PROPERTY.SEGMENT_NAME
Expand Down Expand Up @@ -47,7 +48,8 @@ class SiteCreationTracker @Inject constructor(val tracker: AnalyticsTrackerWrapp
SELECTED_FILTERS("selected_filters"),
VERTICAL_SLUG("vertical_slug"),
VARIATION("variation"),
SITE_NAME("site_name")
SITE_NAME("site_name"),
RECOMMENDED("recommended")
}

private var designSelectionSkipped: Boolean = false
Expand Down Expand Up @@ -172,11 +174,11 @@ class SiteCreationTracker @Inject constructor(val tracker: AnalyticsTrackerWrapp
tracker.track(AnalyticsTracker.Stat.ENHANCED_SITE_CREATION_SITE_DESIGN_SKIPPED)
}

fun trackSiteDesignSelected(template: String) {
fun trackSiteDesignSelected(template: String, recommended: Boolean) {
designSelectionSkipped = false
tracker.track(
AnalyticsTracker.Stat.ENHANCED_SITE_CREATION_SITE_DESIGN_SELECTED,
mapOf(TEMPLATE.key to template)
mapOf(TEMPLATE.key to template, RECOMMENDED.key to recommended)
)
}

Expand Down
7 changes: 4 additions & 3 deletions ...ress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,10 @@ class HomePagePickerViewModel @Inject constructor(
}
}

override fun onLayoutTapped(layoutSlug: String) {
override fun onLayoutTapped(layoutSlug: String, isRecommended: Boolean) {
(uiState.value as? Content)?.let {
if (it.loadedThumbnailSlugs.contains(layoutSlug)) {
updateUiState(it.copy(selectedLayoutSlug = layoutSlug))
updateUiState(it.copy(selectedLayoutSlug = layoutSlug, isSelectedLayoutRecommended = isRecommended))
onPreviewTapped()
loadLayouts()
}
Expand All @@ -112,7 +112,8 @@ class HomePagePickerViewModel @Inject constructor(
selectedLayout?.let { layout ->
super.onPreviewChooseTapped()
Copy link
Contributor Author

@antonis antonis May 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mkevins Delaying the super call that dismisses the preview screen and unselects the layout seems to fix the flow.
I removed the TODO but I'll be happy to put it back if there is more to it 🙏

Copy link
Contributor

@mkevins mkevins May 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fwiw, I added this comment before removing the bottom action buttons, and I left it in case anything else would need to be wired up when adding the new behavior. Delaying it sounds good to me (an alternative might be to pass it as a parameter, but I think this is simpler 🤷‍♂️ ).

One other consideration I had at the time was with regard to the tracks events, and whether we are differentiating between the user choosing from the main screen and the preview screen (in the old flow). In the new flow there is only one path to choose a theme, so maybe we just need to update the tracks description to reflect this?

Copy link
Contributor Author

@antonis antonis May 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the feedback @mkevins 🙇

One other consideration I had at the time was with regard to the tracks events, and whether we are differentiating between the user choosing from the main screen and the preview screen (in the old flow). In the new flow there is only one path to choose a theme, so maybe we just need to update the tracks description to reflect this?

That's a good point. I think with the old flow we do not differentiate between choosing directly or choosing in the preview screen and emit the same event enhanced_site_creation_site_design_selected. Despite that I think it's a good idea to make clear in the description of what we track when we update it to add the new recommended property.

ps. I added a draft issue [Site Design Revamp] Update Tracks event (non-blocking) on the board (cc @twstokes)

val template = layout.slug
analyticsTracker.trackSiteDesignSelected(template)
val isRecommended = (uiState.value as? Content)?.isSelectedLayoutRecommended == true
analyticsTracker.trackSiteDesignSelected(template, isRecommended)
_onDesignActionPressed.value = DesignSelectionAction.Choose(template)
return
}
Expand Down
18 changes: 18 additions & 0 deletions .../src/test/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModelTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,4 +214,22 @@ class HomePagePickerViewModelTest {
verify(onDesignActionObserver).onChanged(captor.capture())
assertThat(captor.value.template).isEqualTo(mockedDesignSlug)
}

@Test
fun `when the user chooses a recommended design the recommended information is emitted`() = mockResponse {
viewModel.start()
viewModel.onThumbnailReady(mockedDesignSlug)
viewModel.onLayoutTapped(mockedDesignSlug, true)
viewModel.onPreviewChooseTapped()
verify(analyticsTracker).trackSiteDesignSelected(mockedDesignSlug, true)
}

@Test
fun `when the user chooses a design that is not recommended the correct information is emitted`() = mockResponse {
viewModel.start()
viewModel.onThumbnailReady(mockedDesignSlug)
viewModel.onLayoutTapped(mockedDesignSlug, false)
viewModel.onPreviewChooseTapped()
verify(analyticsTracker).trackSiteDesignSelected(mockedDesignSlug, false)
}
}