[FIX] website: prevent traceback on countdown bg color reset

When the layout background color was reset using the colorpicker of the
countdown option, a traceback occurred. This was because the countdown
widget relies on having a set color. The text and progress bar colors
were working with unset colors but with inconsistent behavior. This
commit fixes the traceback and makes the widget consistent: using the
reset button on any color tells the countdown widget "use the color
you want" and our countdown widget will simply set it to black.

Thanks to @dwa-odoo and @jpr-odoo for original investigation.

task-2227149

closes odoo/odoo#61657

X-original-commit: 7c29adc8bef633efd53dfd6557206e85a9f55aad
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 13 insertions, 1 deletions

diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index f15b5e94e23..daafad0cd99 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -13,6 +13,7 @@ const CountdownWidget = publicWidget.Widget.extend({
     selector: '.s_countdown',
     xmlDependencies: ['/website/static/src/snippets/s_countdown/000.xml'],
     disabledInEditableMode: false,
+    defaultColor: 'rgba(0, 0, 0, 255)',
 
     /**
      * @override
@@ -76,7 +77,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         if (ColorpickerWidget.isCSSColor(color)) {
             return color;
         }
-        return weUtils.getCSSVariableValue(color);
+        return weUtils.getCSSVariableValue(color) || this.defaultColor;
     },
     /**
      * Gets the time difference in seconds between now and countdown due date.
diff --git a/addons/website/static/src/snippets/s_countdown/options.js b/addons/website/static/src/snippets/s_countdown/options.js
index 8d6ff3d5ba3..ee99e0a83c7 100644
--- a/addons/website/static/src/snippets/s_countdown/options.js
+++ b/addons/website/static/src/snippets/s_countdown/options.js
@@ -3,6 +3,7 @@ odoo.define('website.s_countdown_options', function (require) {
 
 const core = require('web.core');
 const options = require('web_editor.snippets.options');
+const CountdownWidget = require('website.s_countdown');
 
 const qweb = core.qweb;
 
@@ -102,6 +103,16 @@ options.registry.countdown = options.Class.extend({
             case 'endAction':
             case 'layout':
                 return this.$target[0].dataset[methodName];
+
+            case 'selectDataAttribute': {
+                if (params.colorNames) {
+                    // In this case, it is a colorpicker controlling a data
+                    // value on the countdown: the default value is determined
+                    // by the countdown public widget.
+                    params.attributeDefaultValue = CountdownWidget.prototype.defaultColor;
+                }
+                break;
+            }
         }
         return this._super(...arguments);
     },