Merge pull request #16468 from wordpress-mobile/feature/site-design-r…

…evamp Site Design Screen Improvements
wordpress-mobile · Jun 3, 2022 · 771c3e3 · 771c3e3
2 parents 6b2e279 + d2ecdc4
commit 771c3e3
Show file tree

Hide file tree

Showing 58 changed files with 900 additions and 459 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -2,7 +2,7 @@
 
 20.1
 -----
-
+* [*] Site creation: enhances the design selection screen with recommended designs [https://github.com/wordpress-mobile/WordPress-Android/pull/16468]
 
 20.0
 -----

diff --git a/WordPress/src/main/java/org/wordpress/android/modules/AppComponent.java b/WordPress/src/main/java/org/wordpress/android/modules/AppComponent.java
@@ -194,14 +194,8 @@
 import org.wordpress.android.ui.reader.views.ReaderSiteSearchResultView;
 import org.wordpress.android.ui.reader.views.ReaderTagHeaderView;
 import org.wordpress.android.ui.reader.views.ReaderWebView;
-import org.wordpress.android.ui.sitecreation.SiteCreationActivity;
-import org.wordpress.android.ui.sitecreation.domains.SiteCreationDomainsFragment;
-import org.wordpress.android.ui.sitecreation.previews.SiteCreationPreviewFragment;
 import org.wordpress.android.ui.sitecreation.services.SiteCreationService;
-import org.wordpress.android.ui.sitecreation.sitename.SiteCreationSiteNameFragment;
 import org.wordpress.android.ui.sitecreation.theme.DesignPreviewFragment;
-import org.wordpress.android.ui.sitecreation.theme.HomePagePickerFragment;
-import org.wordpress.android.ui.sitecreation.verticals.SiteCreationIntentsFragment;
 import org.wordpress.android.ui.stats.StatsConnectJetpackActivity;
 import org.wordpress.android.ui.stats.refresh.lists.StatsListFragment;
 import org.wordpress.android.ui.stats.refresh.lists.widget.alltime.AllTimeWidgetBlockListProviderFactory;
@@ -260,12 +254,6 @@ public interface AppComponent {
 
     void inject(PostSignupInterstitialActivity object);
 
-    void inject(SiteCreationActivity object);
-
-    void inject(SiteCreationDomainsFragment object);
-
-    void inject(SiteCreationPreviewFragment object);
-
     void inject(JetpackConnectionResultActivity object);
 
     void inject(StatsConnectJetpackActivity object);
@@ -546,12 +534,6 @@ public interface AppComponent {
 
     void inject(ModalLayoutPickerFragment object);
 
-    void inject(HomePagePickerFragment object);
-
-    void inject(SiteCreationIntentsFragment object);
-
-    void inject(SiteCreationSiteNameFragment object);
-
     void inject(SubfilterBottomSheetFragment object);
 
     void inject(AddContentAdapter object);

diff --git a/WordPress/src/main/java/org/wordpress/android/modules/ViewModelModule.java b/WordPress/src/main/java/org/wordpress/android/modules/ViewModelModule.java
@@ -64,12 +64,6 @@
 import org.wordpress.android.ui.reader.viewmodels.ReaderPostListViewModel;
 import org.wordpress.android.ui.reader.viewmodels.ReaderViewModel;
 import org.wordpress.android.ui.reader.viewmodels.SubfilterPageViewModel;
-import org.wordpress.android.ui.sitecreation.SiteCreationMainVM;
-import org.wordpress.android.ui.sitecreation.domains.SiteCreationDomainsViewModel;
-import org.wordpress.android.ui.sitecreation.previews.SitePreviewViewModel;
-import org.wordpress.android.ui.sitecreation.sitename.SiteCreationSiteNameViewModel;
-import org.wordpress.android.ui.sitecreation.theme.HomePagePickerViewModel;
-import org.wordpress.android.ui.sitecreation.verticals.SiteCreationIntentsViewModel;
 import org.wordpress.android.ui.stats.refresh.lists.DaysListViewModel;
 import org.wordpress.android.ui.stats.refresh.lists.InsightsDetailListViewModel;
 import org.wordpress.android.ui.stats.refresh.lists.InsightsListViewModel;
@@ -261,31 +255,6 @@ abstract class ViewModelModule {
     @ViewModelKey(HistoryViewModel.class)
     abstract ViewModel historyViewModel(HistoryViewModel viewModel);
 
-    @Binds
-    @IntoMap
-    @ViewModelKey(SiteCreationIntentsViewModel.class)
-    abstract ViewModel siteCreationIntentsViewModel(SiteCreationIntentsViewModel viewModel);
-
-    @Binds
-    @IntoMap
-    @ViewModelKey(SiteCreationSiteNameViewModel.class)
-    abstract ViewModel siteCreationSiteNameViewModel(SiteCreationSiteNameViewModel viewModel);
-
-    @Binds
-    @IntoMap
-    @ViewModelKey(SiteCreationDomainsViewModel.class)
-    abstract ViewModel siteCreationDomainsViewModel(SiteCreationDomainsViewModel viewModel);
-
-    @Binds
-    @IntoMap
-    @ViewModelKey(SiteCreationMainVM.class)
-    abstract ViewModel siteCreationMainVM(SiteCreationMainVM viewModel);
-
-    @Binds
-    @IntoMap
-    @ViewModelKey(SitePreviewViewModel.class)
-    abstract ViewModel newSitePreviewViewModel(SitePreviewViewModel viewModel);
-
     @Binds
     @IntoMap
     @ViewModelKey(PostListViewModel.class)
@@ -351,11 +320,6 @@ abstract class ViewModelModule {
     @ViewModelKey(ModalLayoutPickerViewModel.class)
     abstract ViewModel mlpViewModel(ModalLayoutPickerViewModel viewModel);
 
-    @Binds
-    @IntoMap
-    @ViewModelKey(HomePagePickerViewModel.class)
-    abstract ViewModel hppViewModel(HomePagePickerViewModel viewModel);
-
     @Binds
     @IntoMap
     @ViewModelKey(PostSignupInterstitialViewModel.class)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt
@@ -4,12 +4,29 @@ import android.os.Bundle
 import android.view.ViewGroup
 import androidx.recyclerview.widget.DiffUtil
 import androidx.recyclerview.widget.RecyclerView.Adapter
+import org.wordpress.android.ui.layoutpicker.LayoutCategoryViewType.DEFAULT
+import org.wordpress.android.ui.layoutpicker.LayoutCategoryViewType.FOOTER
+import org.wordpress.android.ui.layoutpicker.LayoutCategoryViewType.RECOMMENDED
+
+enum class LayoutCategoryViewType {
+    DEFAULT,
+    RECOMMENDED,
+    FOOTER,
+}
 
 /**
  * Renders the layout categories
  */
-class LayoutCategoryAdapter(private var nestedScrollStates: Bundle) : Adapter<LayoutsItemViewHolder>() {
+class LayoutCategoryAdapter(
+    private var nestedScrollStates: Bundle,
+    private val thumbDimensionProvider: ThumbDimensionProvider,
+    private val recommendedDimensionProvider: ThumbDimensionProvider? = null,
+    private val showRowDividers: Boolean = true,
+    private val useLargeCategoryHeading: Boolean = false,
+    private val footerLayoutResId: Int? = null
+) : Adapter<LayoutsRowViewHolder>() {
     private var items: List<LayoutCategoryUiState> = listOf()
+    private val shouldShowFooter get() = footerLayoutResId != null && items.isNotEmpty()
 
     fun update(newItems: List<LayoutCategoryUiState>) {
         val diffResult = DiffUtil.calculateDiff(
@@ -22,19 +39,38 @@ class LayoutCategoryAdapter(private var nestedScrollStates: Bundle) : Adapter<La
         diffResult.dispatchUpdatesTo(this)
     }
 
-    override fun getItemCount(): Int = items.size
+    override fun getItemCount(): Int = items.size + if (shouldShowFooter) 1 else 0
+
+    override fun onBindViewHolder(holder: LayoutsRowViewHolder, position: Int) {
+        (holder as? LayoutsItemViewHolder)?.bind(items[position])
+    }
 
-    override fun onBindViewHolder(holder: LayoutsItemViewHolder, position: Int) {
-        holder.bind(items[position])
+    override fun getItemViewType(position: Int): Int {
+        return when {
+            items.size <= position -> FOOTER.ordinal
+            items[position].isRecommended -> RECOMMENDED.ordinal
+            else -> DEFAULT.ordinal
+        }
     }
 
-    override fun onViewRecycled(holder: LayoutsItemViewHolder) {
+    override fun onViewRecycled(holder: LayoutsRowViewHolder) {
         super.onViewRecycled(holder)
-        holder.onRecycled()
+        (holder as? LayoutsItemViewHolder)?.onRecycled()
     }
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
-            LayoutsItemViewHolder(parent = parent, nestedScrollStates = nestedScrollStates)
+            when (viewType) {
+                FOOTER.ordinal -> LayoutsFooterViewHolder(parent, footerLayoutResId!!)
+                else ->
+                    LayoutsItemViewHolder(
+                            parent = parent,
+                            nestedScrollStates = nestedScrollStates,
+                            thumbDimensionProvider = thumbDimensionProvider,
+                            recommendedDimensionProvider = recommendedDimensionProvider,
+                            showRowDividers = showRowDividers,
+                            useLargeCategoryHeading = useLargeCategoryHeading
+                    )
+            }
 
     fun onRestoreInstanceState(savedInstanceState: Bundle) {
         nestedScrollStates = savedInstanceState

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryDiffCallback.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryDiffCallback.kt
@@ -11,15 +11,17 @@ class LayoutCategoryDiffCallback(
 ) : Callback() {
     object Payload
     override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
-        return newList[newItemPosition].slug == oldList[oldItemPosition].slug
+        return newList[newItemPosition].isRecommended == oldList[oldItemPosition].isRecommended &&
+                newList[newItemPosition].slug == oldList[oldItemPosition].slug
     }
 
     override fun getOldListSize(): Int = oldList.size
 
     override fun getNewListSize(): Int = newList.size
 
     override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
-        return newList[newItemPosition].layouts == oldList[oldItemPosition].layouts
+        return newList[newItemPosition].isRecommended == oldList[oldItemPosition].isRecommended &&
+                newList[newItemPosition].layouts == oldList[oldItemPosition].layouts
     }
 
     override fun getChangePayload(oldItemPosition: Int, newItemPosition: Int): Any? {

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryModel.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryModel.kt
@@ -10,7 +10,9 @@ import org.wordpress.android.fluxc.network.rest.wpcom.theme.StarterDesignCategor
 @SuppressLint("ParcelCreator")
 class LayoutCategoryModel(
     private val starterDesignCategory: StarterDesignCategory? = null,
-    private val blockLayoutCategory: GutenbergLayoutCategory? = null
+    private val blockLayoutCategory: GutenbergLayoutCategory? = null,
+    val isRecommended: Boolean = false,
+    val randomizeOrder: Boolean = false
 ) : Parcelable {
     val slug: String
         get() = starterDesignCategory?.slug ?: blockLayoutCategory?.slug ?: ""
@@ -23,7 +25,14 @@ class LayoutCategoryModel(
 }
 
 @JvmName("starterDesignToLayoutCategories")
-fun List<StarterDesignCategory>.toLayoutCategories() = map { LayoutCategoryModel(starterDesignCategory = it) }
+fun List<StarterDesignCategory>.toLayoutCategories(recommended: Boolean = false, randomizeOrder: Boolean = false) =
+        map {
+            LayoutCategoryModel(
+                    starterDesignCategory = it,
+                    isRecommended = recommended,
+                    randomizeOrder = randomizeOrder
+            )
+        }
 
 @JvmName("gutenbergLayoutToLayoutCategories")
 fun List<GutenbergLayoutCategory>.toLayoutCategories() = map { LayoutCategoryModel(blockLayoutCategory = it) }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryUiState.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryUiState.kt
@@ -6,10 +6,12 @@ package org.wordpress.android.ui.layoutpicker
  * @param title the layout category title
  * @param description the layout category description
  * @param layouts the layouts list
+ * @param isRecommended defines if the category is recommended (optional with default `false`)
  */
 data class LayoutCategoryUiState(
     val slug: String,
     val title: String,
     val description: String,
-    val layouts: List<LayoutListItemUiState>
+    val layouts: List<LayoutListItemUiState>,
+    val isRecommended: Boolean = false
 )
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutListItemUiState.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutListItemUiState.kt
@@ -9,13 +9,18 @@ data class LayoutListItemUiState(
     val slug: String,
     val title: String,
     val preview: String,
+    val mShotPreview: String,
     val selected: Boolean,
     val onItemTapped: (() -> Unit),
-    val onThumbnailReady: (() -> Unit)
+    val onThumbnailReady: (() -> Unit),
+    private val tapOpensPreview: Boolean
 ) {
     val contentDescriptionResId: Int
-        get() = if (selected) R.string.mlp_selected_description else R.string.mlp_notselected_description
-
+        get() = when {
+            tapOpensPreview -> R.string.hpp_preview_tapped_theme
+            selected -> R.string.mlp_selected_description
+            else -> R.string.mlp_notselected_description
+        }
     val selectedOverlayVisible: Boolean
-        get() = selected
+        get() = !tapOpensPreview && selected
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerTracker.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerTracker.kt
@@ -3,7 +3,9 @@ package org.wordpress.android.ui.layoutpicker
 interface LayoutPickerTracker {
     fun trackPreviewModeChanged(mode: String)
 
-    fun trackThumbnailModeTapped(mode: String)
+    // NOOP implementation provided to make override optional in subclasses
+    fun trackThumbnailModeTapped(mode: String) {
+    }
 
     fun trackPreviewModeTapped(mode: String)
 

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerUiState.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerUiState.kt
@@ -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(),

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerViewModel.kt
@@ -64,9 +64,14 @@ abstract class LayoutPickerViewModel(
         }
 
     abstract val useCachedData: Boolean
+    abstract val shouldUseMobileThumbnail: Boolean
+    open val thumbnailTapOpensPreview = false
 
     var nestedScrollStates: Bundle = Bundle()
 
+    // Map that holds the ordered/randomised layouts list per category (key: slug)
+    val orderedLayouts: MutableMap<String, List<LayoutModel>> = mutableMapOf()
+
     abstract fun fetchLayouts(preferCache: Boolean = false)
 
     open fun onPreviewChooseTapped() = onDismissPreview()
@@ -141,7 +146,7 @@ abstract class LayoutPickerViewModel(
         }
     }
 
-    private fun loadLayouts() {
+    fun loadLayouts() {
         val state = uiState.value as? Content ?: Content()
         launch(bgDispatcher) {
             val listItems = ArrayList<LayoutCategoryUiState>()
@@ -153,18 +158,30 @@ abstract class LayoutPickerViewModel(
             }
 
             selectedCategories.forEach { category ->
-
-                val layouts = layouts.getFilteredLayouts(category.slug).map { layout ->
+                val ordered = orderedLayouts[category.slug] ?: if (category.randomizeOrder) {
+                    val randomised = layouts.getFilteredLayouts(category.slug).shuffled()
+                    orderedLayouts[category.slug] = randomised
+                    randomised
+                } else {
+                    val ordered = layouts.getFilteredLayouts(category.slug)
+                    orderedLayouts[category.slug] = ordered
+                    ordered
+                }
+                val layouts = ordered.map { layout ->
+                    val preview = when (_previewMode.value) {
+                        MOBILE -> layout.previewMobile
+                        TABLET -> layout.previewTablet
+                        else -> layout.preview
+                    }
+                    val thumbnailPreview = if (shouldUseMobileThumbnail) layout.previewMobile else preview
                     LayoutListItemUiState(
                             slug = layout.slug,
                             title = layout.title,
-                            preview = when (_previewMode.value) {
-                                MOBILE -> layout.previewMobile
-                                TABLET -> layout.previewTablet
-                                else -> layout.preview
-                            },
+                            preview = preview,
+                            mShotPreview = thumbnailPreview,
                             selected = layout.slug == state.selectedLayoutSlug,
-                            onItemTapped = { onLayoutTapped(layoutSlug = layout.slug) },
+                            tapOpensPreview = thumbnailTapOpensPreview,
+                            onItemTapped = { onLayoutTapped(layoutSlug = layout.slug, category.isRecommended) },
                             onThumbnailReady = { onThumbnailReady(layoutSlug = layout.slug) }
                     )
                 }
@@ -173,7 +190,8 @@ abstract class LayoutPickerViewModel(
                                 category.slug,
                                 category.title,
                                 category.description,
-                                layouts
+                                layouts,
+                                category.isRecommended
                         )
                 )
             }
@@ -187,7 +205,7 @@ abstract class LayoutPickerViewModel(
      * Layout tapped
      * @param layoutSlug the slug of the tapped layout
      */
-    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
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ @@
 .1
     -----
+    * [*] Site creation: enhances the design selection screen with recommended designs [https://github.com/wordpress-mobile/WordPress-Android/pull/16468]
 .0
     -----
@@ Expand Down @@