From 5ffd9c15cf2a1b0ed25450a1dc6b671e029a36cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Tue, 11 Apr 2023 12:12:38 +0000
Subject: [PATCH] [FIX] im_livechat: chatbot step answer style in external lib
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, when using chatbot on an external website,
the answers were not styled like buttons.

This happens because styling is using bootstrap classnames, which
are not available in the external lib.

This commit fixes the issue by putting SCSS equivalent style rules,
so that the answers are properly styled.

opw-3234872

closes odoo/odoo#118264

X-original-commit: c2c5eee10aa917852c942e1092c026746387e11a
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../src/legacy/public_livechat_chatbot.xml    |  2 +-
 .../src/scss/im_livechat_bootstrap.scss       | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml b/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
index 65600079e09..09c2f89d040 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
+++ b/addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
@@ -41,7 +41,7 @@
                 <t t-foreach="message.getChatbotStepAnswers()" t-as="stepAnswer">
                     <li t-att-data-chatbot-step-answer-id="stepAnswer.id"
                         t-att-data-chatbot-step-redirect-link="stepAnswer.redirect_link"
-                        class="d-inline-block border border-primary rounded p-2 me-3 mb-1 fw-bold">
+                        class="o_livechat_chatbot_stepAnswer d-inline-block border border-primary rounded p-2 me-3 mb-1 fw-bold">
                         <t t-out="stepAnswer.label"/>
                     </li>
                     <br/>
diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
index 740c1a77c4d..3c588a966e1 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
@@ -34,3 +34,27 @@
         content: " \27A4";
     }
 }
+
+// Bootstrap classnames are not available in external lib
+// These are equivalent scss rules so visually it still works.
+.o_livechat_chatbot_end {
+  // @extend .bg-200;
+  font-style: italic !important; // @extend .fst-italic;
+  text-align: center !important; // @extend .text-center;
+  border: 1px solid #dee2e6 !important; // @extend .border;
+}
+
+.o_livechat_chatbot_stepAnswer {
+  display: inline-block !important; // @extend .d-inline-block;
+  border: 1px solid #dee2e6 !important; // @extend .border;
+  border-color: #017e84 !important; // @extend .border-primary;
+  border-radius: 0.25rem !important; // @extend .rounded;
+  padding: 0.5rem !important; // @extend .p-2;
+  margin-right: 1rem !important; // @extend .me-3;
+  margin-bottom: 0.25rem !important; // @extend .mb-1;
+  font-weight: 700 !important; // @extend .fw-bold;
+}
+
+.o_livechat_chatbot_options li:not(.disabled):hover {
+  background-color: #017e84 !important;
+}