From 3bf3a40606ca2a5e8c9da74dd6c64dc07e599932 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 14 Aug 2018 18:29:30 +0530
Subject: [PATCH] [FIX] website: BS4, restore facebook snippet UI

+ solve JS error introduced by a recent commit

Thanks to @kig-odoo for original fix
---
 .../static/src/js/editor/snippets.options.js  |  2 +-
 .../static/src/xml/website.facebook_page.xml  | 27 +++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 1ba57400989..7e04db470c1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -546,7 +546,7 @@ var FacebookPageDialog = weWidgets.Dialog.extend({
                         } else if (!self.fbData.small_header) {
                             self.fbData.height = self.fbData.show_facepile ? 225 : 150;
                         }
-                        options.registry.facebookPage.prototype.markFbElement(self, self.$previewPage, self.fbData);
+                        options.registry.facebookPage.prototype.markFbElement(self.getParent(), self.$previewPage, self.fbData);
                     },
                     404: function () {
                         self._toggleWarning(false);
diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml
index 7f16b568aec..d036e68b261 100644
--- a/addons/website/static/src/xml/website.facebook_page.xml
+++ b/addons/website/static/src/xml/website.facebook_page.xml
@@ -3,26 +3,31 @@
 <div t-name="website.facebook_page_dialog">
     <div class="row">
         <form class="col-lg-6">
-            <div class="form-group row">
+            <div class="form-group form-row">
                 <label class="col-form-label col-md-3">Page URL</label>
                 <div class="col-md-9">
                     <input class="form-control o_facebook_page_url" required="required" t-att-value="widget.fbData.href"/>
                 </div>
             </div>
-            <div class="form-group row o_facebook_tabs">
+            <div class="form-group form-row o_facebook_tabs">
                 <t t-set="fb_tabs" t-value="widget.fbData.tabs and widget.fbData.tabs.split(',') or []"/>
                 <label class="col-form-label col-md-3">Tabs</label>
-                <div class="col-md-3 checkbox">
-                    <label><input type="checkbox" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>Timeline</label>
-                </div>
-                <div class="col-md-3 checkbox">
-                    <label><input type="checkbox" name="events" t-att-checked="_.contains(fb_tabs, 'events') or None"/>Events</label>
-                </div>
-                <div class="col-md-3 checkbox">
-                    <label><input type="checkbox" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>Messages</label>
+                <div class="col-md-9">
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox" id="o_facebook_page_tab_timeline_checkbox" class="custom-control-input" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>
+                        <label class="custom-control-label" for="o_facebook_page_tab_timeline_checkbox">Timeline</label>
+                    </div>
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox" id="o_facebook_page_tab_events_checkbox" class="custom-control-input" name="events" t-att-checked="_.contains(fb_tabs, 'events') or None"/>
+                        <label class="custom-control-label" for="o_facebook_page_tab_events_checkbox">Events</label>
+                    </div>
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox" id="o_facebook_page_tab_messages_checkbox" class="custom-control-input" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>
+                        <label class="custom-control-label" for="o_facebook_page_tab_messages_checkbox">Messages</label>
+                    </div>
                 </div>
              </div>
-            <div class="form-group row o_facebook_options">
+            <div class="form-group form-row o_facebook_options">
                 <label class="col-form-label col-md-3">Options</label>
                 <div class="col-md-9 mt8">
                 <label class="o_switch">