From 3845b650e65d629cd76e2f15d58f066af06628d7 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 20 Aug 2021 12:14:24 +0000
Subject: [PATCH] [FIX] website: make robust IDs for visibility conditions on
 snippets

As nicely pointed by @kig-odoo at [1], the new feature of snippet
visibility conditions introduced in [2] has some issues. This fixes
the fact that condition identifiers were built by combining IDs without
a separator. A condition targeting a lang with ID:4 and another one with
ID:5 could thus produce the same condition identifier as another
condition targeting a lang with ID:45 (as 4 and 5 side-by-side makes
45...). Now, all parts of the identifiers are separated with '_'.

[1]: https://github.com/odoo/odoo/pull/67140#issuecomment-902531321
[2]: https://github.com/odoo/odoo/commit/1c442782f887a8c16bae05a43fae13a310ac05df

closes odoo/odoo#75386

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../website/static/src/js/editor/snippets.options.js  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index fb4d1f74d32..3605ef86bd7 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3041,11 +3041,11 @@ options.registry.ConditionalVisibility = options.Class.extend({
      *
      * @private
      */
-     _updateCSSSelectors() {
+    _updateCSSSelectors() {
         // There are 2 data attributes per option:
         // - One that stores the current records selected
         // - Another that stores the value of the rule "Hide for / Visible for"
-        let visibilityId = '';
+        const visibilityIDParts = [];
         const onlyAttributes = [];
         const hideAttributes = [];
         const target = this.$target[0];
@@ -3068,11 +3068,12 @@ options.registry.ConditionalVisibility = options.Class.extend({
                 }
                 // Create a visibilityId based on the options name and their
                 // values. eg : hide for en_US(id:1) -> lang1h
-                visibilityId += attribute.attributeName.replace('data-', '')
-                + records.reduce((acc, record) => acc += record.id, '')
-                + (hideFor ? 'h' : 'o');
+                const type = attribute.attributeName.replace('data-', '');
+                const valueIDs = records.map(record => record.id).sort();
+                visibilityIDParts.push(`${type}_${hideFor ? 'h' : 'o'}_${valueIDs.join('_')}`);
             }
         }
+        const visibilityId = visibilityIDParts.join('_');
         // Creates CSS selectors based on those attributes, the reducers
         // combine the attributes' values.
         let selectors = '';