From d6f9904b1f0fabb379bb326fe0a669fa81270a72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Warnon?= <awa@odoo.com>
Date: Fri, 11 Sep 2020 11:12:14 +0000
Subject: [PATCH] [FIX] sale: fix product configurator variants description

When purchasing a product through the e-commerce using product configurator
features such as custom attribute values, the computed product description
containing the selected values could be broken when using special values.

This commit fixes the description building by using proper DOM manipulation.

Task 2337859

closes odoo/odoo#57583

X-original-commit: c9c260553b991d97dedeed5e7027a4fca78afcea
Signed-off-by: awa-odoo <awa-odoo@users.noreply.github.com>
---
 .../src/js/product_configurator_modal.js      | 54 +++++++++++--------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/addons/sale_product_configurator/static/src/js/product_configurator_modal.js b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
index 0be980b9ac0..b495100abe7 100644
--- a/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
@@ -223,20 +223,27 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, VariantMixin, {
                  this.rootProduct.no_variant_attribute_values)) {
             var $productDescription = $modalContent
                 .find('.main_product')
-                .find('td.td-product_name div.text-muted.small');
-            var description = $productDescription.html();
+                .find('td.td-product_name div.text-muted.small > div:first');
+            var $updatedDescription = $('<div/>');
+            $updatedDescription.append($('<p>', {
+                text: $productDescription.text()
+            }));
 
-            $.each(this.rootProduct.product_custom_attribute_values, function () {
-                description += '<br/>' + this.attribute_value_name + ': ' + this.custom_value;
+            $.each(this.rootProduct.product_custom_attribute_values, function (){
+                $updatedDescription.append($('<div>', {
+                    text: this.attribute_value_name + ': ' + this.custom_value
+                }));
             });
 
-            $.each(this.rootProduct.no_variant_attribute_values, function () {
-                if (this.is_custom !== 'True') {
-                    description += '<br/>' + this.attribute_name + ': ' + this.attribute_value_name;
+            $.each(this.rootProduct.no_variant_attribute_values, function (){
+                if (this.is_custom !== 'True'){
+                    $updatedDescription.append($('<div>', {
+                        text: this.attribute_name + ': ' + this.attribute_value_name
+                    }));
                 }
             });
 
-            $productDescription.html(description);
+            $productDescription.replaceWith($updatedDescription);
         }
 
         return $modalContent;
@@ -314,20 +321,25 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, VariantMixin, {
             var $productDescription = $parent
                 .find('td.td-product_name div.float-left');
 
-            var description = '';
-            $.each(productCustomVariantValues, function () {
-                description += '<br/>' + this.attribute_value_name + ': ' + this.custom_value;
-            });
-
-            $.each(noVariantAttributeValues, function () {
-                if (this.is_custom !== 'True') {
-                    description += '<br/>' + this.attribute_name + ': ' + this.attribute_value_name;
-                }
-            });
-
             var $customAttributeValuesDescription = $('<div>', {
-                class: 'custom_attribute_values_description text-muted small',
-                html: description
+                class: 'custom_attribute_values_description text-muted small'
+            });
+            if (productCustomVariantValues.length !== 0 || noVariantAttributeValues.length !== 0) {
+                $customAttributeValuesDescription.append($('<br/>'));
+            }
+
+            $.each(productCustomVariantValues, function (){
+                $customAttributeValuesDescription.append($('<div>', {
+                    text: this.attribute_value_name + ': ' + this.custom_value
+                }));
+            });
+
+            $.each(noVariantAttributeValues, function (){
+                if (this.is_custom !== 'True'){
+                    $customAttributeValuesDescription.append($('<div>', {
+                        text: this.attribute_name + ': ' + this.attribute_value_name
+                    }));
+                }
             });
 
             $productDescription.append($customAttributeValuesDescription);