[FIX] website, website_sale: preconfigure Dynamic Products w/ 1st option

Before this commit the Dynamic Products snippet was displaying a message
box instead of its content until its template and product category were
selected.

After this commit the Dynamic Products snippet is automatically
configured on drop with the first available template and the first
available product category. The message box only appears if no product
category exists yet. Also an "All Products" category was added as first
element of the list to make the snippet usable before categories are
defined.

task-2439295
https://github.com/odoo/odoo/pull/64982

closes odoo/odoo#64982

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

4 files changed, 45 insertions, 2 deletions

diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/000.js b/addons/website/static/src/snippets/s_dynamic_snippet/000.js
index 71b551738b5..d6a3e0ffca4 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/000.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/000.js
@@ -129,10 +129,17 @@ const DynamicSnippet = publicWidget.Widget.extend({
      *
      * @private
      */
+    _mustMessageWarningBeHidden: function() {
+        return this._isConfigComplete() || !this.editableMode;
+    },
+    /**
+     *
+     * @private
+     */
     _manageWarningMessageVisibility: async function () {
         this.$el.find('.missing_option_warning').toggleClass(
             'd-none',
-            this._isConfigComplete()
+            this._mustMessageWarningBeHidden()
         );
     },
     /**
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
index 3763593f98f..2bd13284876 100644
--- a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
@@ -23,6 +23,20 @@ const DynamicSnippetProducts = DynamicSnippetCarousel.extend({
         return this._super.apply(this, arguments) && this.$el.get(0).dataset.productCategoryId !== undefined;
     },
     /**
+     *
+     * @override
+     * @private
+     */
+    _mustMessageWarningBeHidden: function() {
+        const isInitialDrop = this.$el.get(0).dataset.templateKey === undefined;
+        // This snippet has default values obtained after the initial start and render after drop.
+        // Because of this there is an initial refresh happening right after.
+        // We want to avoid showing the incomplete config message before this refresh.
+        // Since the refreshed call will always happen with a defined templateKey,
+        // if it is not set yet, we know it is the drop call and we can avoid showing the message.
+        return isInitialDrop || this._super.apply(this, arguments);
+    },
+    /**
      * Method to be overridden in child components in order to provide a search
      * domain if needed.
      * @override
@@ -30,7 +44,10 @@ const DynamicSnippetProducts = DynamicSnippetCarousel.extend({
      */
     _getSearchDomain: function () {
         const searchDomain = this._super.apply(this, arguments);
-        searchDomain.push(['public_categ_ids', 'child_of', parseInt(this.$el.get(0).dataset.productCategoryId)]);
+        const productCategoryId = parseInt(this.$el.get(0).dataset.productCategoryId);
+        if (productCategoryId >= 0) {
+            searchDomain.push(['public_categ_ids', 'child_of', productCategoryId]);
+        }
         return searchDomain;
     },
 
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js
index f059e78a861..3dabb014f21 100644
--- a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js
@@ -26,6 +26,8 @@ const dynamicSnippetProductsOptions = s_dynamic_snippet_carousel_options.extend(
             if (data.length) {
                 this.$target.get(0).dataset.filterId = data[0].id;
                 this.$target.get(0).dataset.numberOfRecords = this.dynamicFilters[data[0].id].limit;
+                this._refreshPublicWidgets();
+                // Refresh is needed because default values are obtained after start()
             }
         });
     },
@@ -82,6 +84,22 @@ const dynamicSnippetProductsOptions = s_dynamic_snippet_carousel_options.extend(
         const productCategoriesSelectorEl = uiFragment.querySelector('[data-name="product_category_opt"]');
         return this._renderSelectUserValueWidgetButtons(productCategoriesSelectorEl, this.productCategories);
     },
+    /**
+     * Sets default options values.
+     * @override
+     * @private
+     */
+    _setOptionsDefaultValues: function () {
+        this._super.apply(this, arguments);
+        const templateKeys = this.$el.find("we-select[data-attribute-name='templateKey'] we-selection-items we-button");
+        if (templateKeys.length > 0) {
+            this._setOptionValue('templateKey', templateKeys.attr('data-select-data-attribute'));
+        }
+        const productCategories = this.$el.find("we-select[data-attribute-name='productCategoryId'] we-selection-items we-button");
+        if (productCategories.length > 0) {
+            this._setOptionValue('productCategoryId', productCategories.attr('data-select-data-attribute'));
+        }
+    },
 
 });
 
diff --git a/addons/website_sale/views/snippets/s_dynamic_snippet_products.xml b/addons/website_sale/views/snippets/s_dynamic_snippet_products.xml
index 9b2c18a9a69..2e871086a5d 100644
--- a/addons/website_sale/views/snippets/s_dynamic_snippet_products.xml
+++ b/addons/website_sale/views/snippets/s_dynamic_snippet_products.xml
@@ -11,6 +11,7 @@
                 <t t-set="snippet_name" t-value="'dynamic_snippet_products'"/>
                 <t t-set="snippet_selector" t-value="'.s_dynamic_snippet_products'"/>
                 <we-select string="Product Category" data-name="product_category_opt" data-attribute-name="productCategoryId" data-no-preview="true">
+                    <we-button data-select-data-attribute="-1">All Products</we-button>
                 </we-select>
             </t>
         </xpath>