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

addons/website/static/src/snippets/s_dynamic_snippet/000.js

@@ -125,6 +125,13 @@ const DynamicSnippet = publicWidget.Widget.extend({
             });
         }
     },
+    /**
+     *
+     * @private
+     */
+    _mustMessageWarningBeHidden: function() {
+        return this._isConfigComplete() || !this.editableMode;
+    },
     /**
      *
      * @private
@@ -132,7 +139,7 @@ const DynamicSnippet = publicWidget.Widget.extend({
     _manageWarningMessageVisibility: async function () {
         this.$el.find('.missing_option_warning').toggleClass(
             'd-none',
-            this._isConfigComplete()
+            this._mustMessageWarningBeHidden()
         );
     },
     /**

addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js

@@ -22,6 +22,20 @@ const DynamicSnippetProducts = DynamicSnippetCarousel.extend({
     _isConfigComplete: function () {
         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.
@@ -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;
     },
 

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'));
+        }
+    },
 
 });
 

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>