From e5380a8e40be47cddf53aa24ff01e7c6802bbdb7 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Thu, 15 Jun 2023 09:23:12 +0200
Subject: [PATCH] [IMP] website, *: add extra elements feature

*: website_sale, website_sale_wishlist

This commit allows the user to show and hide the menu items they want
using the web editor.

task-3060986

Part-of: odoo/odoo#119650
---
 .../header_extra_element_cta.svg              |  4 ++
 .../header_extra_element_logo.svg             |  6 +++
 .../header_extra_element_social.svg           |  5 +++
 .../header_extra_element_text.svg             |  1 +
 .../static/src/js/editor/snippets.options.js  | 29 ++++++------
 addons/website/views/snippets/snippets.xml    | 45 +++++++++++++++++--
 .../website_sale/views/snippets/snippets.xml  | 12 +++--
 .../website_sale_wishlist/views/snippets.xml  | 14 +++---
 8 files changed, 86 insertions(+), 30 deletions(-)
 create mode 100644 addons/website/static/src/img/snippets_options/header_extra_element_cta.svg
 create mode 100644 addons/website/static/src/img/snippets_options/header_extra_element_logo.svg
 create mode 100644 addons/website/static/src/img/snippets_options/header_extra_element_social.svg
 create mode 100644 addons/website/static/src/img/snippets_options/header_extra_element_text.svg

diff --git a/addons/website/static/src/img/snippets_options/header_extra_element_cta.svg b/addons/website/static/src/img/snippets_options/header_extra_element_cta.svg
new file mode 100644
index 00000000000..1466c7b1e88
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_extra_element_cta.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.775 6.68652L5.44617 4.01978C5.38667 3.9983 5.32229 3.99422 5.26056 4.00801C5.19883 4.02179 5.1423 4.05288 5.09757 4.09763C5.05285 4.14239 5.02178 4.19896 5.008 4.26073C4.99422 4.3225 4.9983 4.38692 5.01977 4.44646L7.6848 11.78C7.70808 11.8444 7.75063 11.9001 7.80666 11.9395C7.86269 11.9788 7.92948 12 7.99794 12C8.06466 12.0001 8.12986 11.9801 8.1851 11.9426C8.24034 11.9052 8.28307 11.852 8.30775 11.79L9.58697 8.58991L12.785 7.30987C12.8482 7.28588 12.9026 7.24322 12.941 7.18755C12.9794 7.13188 13 7.06584 13 6.99819C13 6.93055 12.9794 6.86451 12.941 6.80884C12.9026 6.75317 12.8482 6.71051 12.785 6.68652H12.775Z" class="o_graphic"/>
+<path d="M2 0C0.895431 0 0 0.895431 0 2V6C0 7.10457 0.895431 8 2 8H5.24716L4.07903 4.7856C3.99321 4.54755 3.9769 4.28999 4.03198 4.04303C4.08707 3.79606 4.2113 3.56981 4.39024 3.39075C4.56918 3.2117 4.79544 3.08725 5.0426 3.03205C5.28975 2.97685 5.54751 2.9932 5.7857 3.07918L5.78811 3.08006L12.9513 5.68652H12.9684L13.1399 5.75159C13.3929 5.84763 13.6106 6.01837 13.7642 6.24104C13.9178 6.4637 14 6.72778 14 6.99819C14 7.26861 13.9178 7.53269 13.7642 7.75535C13.7017 7.84602 13.6285 7.92809 13.5466 8H14C15.1046 8 16 7.10457 16 6V2C16 0.895431 15.1046 0 14 0H2Z" class="o_subdle"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_extra_element_logo.svg b/addons/website/static/src/img/snippets_options/header_extra_element_logo.svg
new file mode 100644
index 00000000000..392960cec09
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_extra_element_logo.svg
@@ -0,0 +1,6 @@
+<svg width="33" height="16" viewBox="0 0 33 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 4H0V12H6V10H2V4Z" class="o_graphic"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12C8.79086 12 7 10.2091 7 8C7 5.79086 8.79086 4 11 4C13.2091 4 15 5.79086 15 8C15 10.2091 13.2091 12 11 12ZM11 6C9.89543 6 9 6.89543 9 8C9 9.10457 9.89543 10 11 10C12.1046 10 13 9.10457 13 8C13 6.89543 12.1046 6 11 6Z" class="o_graphic"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29 12C26.7909 12 25 10.2091 25 8C25 5.79086 26.7909 4 29 4C31.2091 4 33 5.79086 33 8C33 10.2091 31.2091 12 29 12ZM29 6C27.8954 6 27 6.89543 27 8C27 9.10457 27.8954 10 29 10C30.1046 10 31 9.10457 31 8C31 6.89543 30.1046 6 29 6Z" class="o_graphic"/>
+<path d="M20 12C17.7909 12 16 10.2091 16 8C16 5.79086 17.7909 4 20 4H21V6H20C18.8954 6 18 6.89543 18 8C18 9.10457 18.8954 10 20 10C21.1046 10 22 9.10457 22 8H21V7H24V8C24 10.2091 22.2091 12 20 12Z" class="o_graphic"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_extra_element_social.svg b/addons/website/static/src/img/snippets_options/header_extra_element_social.svg
new file mode 100644
index 00000000000..077b2a30a2c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_extra_element_social.svg
@@ -0,0 +1,5 @@
+<svg width="35" height="10" viewBox="0 0 35 10" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.93348 4.03622e-06H1.07237C0.931682 -0.000381409 0.792302 0.0269957 0.662213 0.0805675C0.532124 0.134139 0.413884 0.212853 0.314267 0.312198C0.21465 0.411543 0.135613 0.529567 0.0816856 0.659509C0.0277582 0.789451 -5.28001e-07 0.928755 0 1.06944V8.93055C-5.28001e-07 9.07124 0.0277582 9.21055 0.0816856 9.34049C0.135613 9.47043 0.21465 9.58846 0.314267 9.6878C0.413884 9.78715 0.532124 9.86586 0.662213 9.91943C0.792302 9.973 0.931682 10.0004 1.07237 10H4.13712V6.60123H2.73073V4.99853H4.13712V3.77674C4.13712 2.38793 4.96337 1.62321 6.22912 1.62321C6.64434 1.62895 7.05858 1.66518 7.4685 1.73162V3.09405H6.77116C6.08262 3.09405 5.86873 3.5189 5.86873 3.9584V4.99561H7.39525L7.14913 6.5983H5.85994V9.99707H8.93348C9.07403 9.99745 9.21327 9.97006 9.3432 9.91645C9.47312 9.86284 9.59117 9.78408 9.69055 9.6847C9.78994 9.58531 9.8687 9.46727 9.9223 9.33734C9.97591 9.20742 10.0033 9.06818 10.0029 8.92763V1.06944C10.0033 0.928894 9.97591 0.789654 9.9223 0.659729C9.8687 0.529804 9.78994 0.411757 9.69055 0.312373C9.59117 0.212989 9.47312 0.13423 9.3432 0.0806223C9.21327 0.0270149 9.07403 -0.000382621 8.93348 4.03622e-06Z" class="o_graphic"/>
+<path d="M20.9932 4.01406e-06H13.135C12.9943 -0.000381432 12.855 0.0269957 12.7249 0.0805675C12.5948 0.134139 12.4766 0.212853 12.3769 0.312198C12.2773 0.411543 12.1983 0.529567 12.1444 0.659509C12.0904 0.789451 12.0627 0.928755 12.0627 1.06944V8.93055C12.0627 9.07124 12.0904 9.21055 12.1444 9.34049C12.1983 9.47043 12.2773 9.58846 12.3769 9.6878C12.4766 9.78715 12.5948 9.86586 12.7249 9.91943C12.855 9.973 12.9943 10.0004 13.135 10H20.9932C21.1339 10.0004 21.2733 9.973 21.4034 9.91943C21.5335 9.86586 21.6517 9.78715 21.7513 9.6878C21.8509 9.58846 21.93 9.47043 21.9839 9.34049C22.0378 9.21055 22.0656 9.07124 22.0656 8.93055V1.06944C22.0656 0.928755 22.0378 0.789451 21.9839 0.659509C21.93 0.529567 21.8509 0.411543 21.7513 0.312198C21.6517 0.212853 21.5335 0.134139 21.4034 0.0805675C21.2733 0.0269957 21.1339 -0.000381432 20.9932 4.01406e-06ZM19.9033 3.54527C19.9033 3.6068 19.9033 3.67126 19.9033 3.73279C19.9037 4.4807 19.7029 5.21495 19.322 5.85858C18.941 6.50221 18.394 7.03153 17.7381 7.39105C17.0823 7.75057 16.3418 7.92707 15.5944 7.90203C14.8469 7.877 14.1199 7.65135 13.4896 7.24875C13.6063 7.26199 13.7237 7.26786 13.8412 7.26633C14.4996 7.26834 15.1395 7.04849 15.6577 6.64225C15.3521 6.63672 15.0559 6.53572 14.8105 6.35341C14.5651 6.17109 14.3829 5.91659 14.2894 5.62555C14.5095 5.66497 14.7354 5.65598 14.9516 5.59918C14.6202 5.53153 14.3224 5.35131 14.1088 5.08908C13.8952 4.82686 13.7789 4.49879 13.7796 4.16056V4.14298C13.981 4.2578 14.2072 4.32213 14.4389 4.3305C14.2382 4.19623 14.0737 4.01443 13.9603 3.80127C13.8468 3.5881 13.7877 3.35019 13.7884 3.1087C13.7869 2.8491 13.8557 2.59393 13.9877 2.37035C14.3545 2.82381 14.8129 3.19471 15.333 3.45877C15.853 3.72284 16.423 3.87412 17.0055 3.90273C16.9304 3.58779 16.9617 3.25684 17.0945 2.96157C17.2274 2.66631 17.4543 2.42338 17.7398 2.27073C18.0254 2.11809 18.3534 2.06434 18.6728 2.11788C18.9921 2.17142 19.2847 2.32923 19.5048 2.56666C19.8322 2.50192 20.1463 2.38204 20.4336 2.21213C20.3236 2.55 20.0945 2.83636 19.789 3.01788C20.08 2.98526 20.3644 2.90921 20.6328 2.79227C20.4333 3.08212 20.1867 3.33662 19.9033 3.54527Z" class="o_graphic"/>
+<path d="M33.1087 0H25.1509C24.8789 0 24.6181 0.108043 24.4258 0.300359C24.2335 0.492676 24.1254 0.753513 24.1254 1.02549V8.9745C24.1254 9.24648 24.2335 9.50732 24.4258 9.69963C24.6181 9.89195 24.8789 9.99999 25.1509 9.99999H33.1087C33.2425 10.0004 33.375 9.97436 33.4987 9.92344C33.6224 9.87252 33.7348 9.79769 33.8295 9.70325C33.9242 9.6088 33.9994 9.49659 34.0507 9.37304C34.1019 9.2495 34.1283 9.11705 34.1283 8.98329V1.0167C34.1268 0.747024 34.0188 0.488876 33.8278 0.298457C33.6368 0.108039 33.3784 0.000768302 33.1087 0ZM25.6636 8.5731V3.79724H27.1491V8.5731H25.6636ZM26.4049 3.14679C26.2344 3.14679 26.0678 3.09619 25.926 3.00141C25.7843 2.90663 25.6739 2.77192 25.6088 2.61435C25.5437 2.45677 25.5268 2.28342 25.5603 2.11624C25.5938 1.94907 25.6761 1.79558 25.7969 1.67523C25.9176 1.55488 26.0714 1.47307 26.2387 1.44016C26.406 1.40726 26.5793 1.42473 26.7366 1.49038C26.894 1.55603 27.0283 1.66689 27.1226 1.80894C27.2169 1.95098 27.2669 2.11781 27.2663 2.28831C27.2663 2.40129 27.244 2.51317 27.2007 2.61751C27.1574 2.72186 27.0939 2.81663 27.0139 2.89638C26.9338 2.97614 26.8388 3.03931 26.7344 3.08228C26.6299 3.12525 26.5179 3.14717 26.4049 3.14679ZM32.7044 8.5731H31.2218V6.24963C31.2218 5.69586 31.2218 4.98388 30.4512 4.98388C29.6806 4.98388 29.5722 5.58746 29.5722 6.20861V8.5731H28.0897V3.79724H29.5136V4.45063H29.5312C29.6745 4.20746 29.8809 4.0075 30.1284 3.87187C30.3759 3.73624 30.6555 3.66996 30.9376 3.68004C32.4377 3.68004 32.7161 4.67037 32.7161 5.95663L32.7044 8.5731Z" class="o_graphic"/>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_extra_element_text.svg b/addons/website/static/src/img/snippets_options/header_extra_element_text.svg
new file mode 100644
index 00000000000..1940324a0a3
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_extra_element_text.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.8865 0H0.113475L0 2.99169H0.661938C1.02128 1.11357 1.71158 0.822715 4.38771 0.747923L5 0.731302V10.2465C5 11.0526 4.59811 11.2438 3 11.3684V12L9 12V11.3684C7.39244 11.2438 7 11.0526 7 10.2465V0.731302L7.61229 0.747923C10.2884 0.822715 10.9787 1.11357 11.3381 2.99169H12L11.8865 0Z" class="o_graphic"/></svg>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 617686e35cf..eabc79f9c56 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2243,19 +2243,7 @@ options.registry.HeaderLayout = options.registry.WebsiteLevelColor.extend({
     }
 });
 
-options.registry.HeaderNavbar = options.Class.extend({
-    /**
-     * Particular case: we want the option to be associated on the header navbar
-     * in XML so that the related options only appear on navbar click (not
-     * header), in a different section, etc... but we still want the target to
-     * be the header itself.
-     *
-     * @constructor
-     */
-    init() {
-        this._super(...arguments);
-        this.setTarget(this.$target.closest('#wrapwrap > header'));
-    },
+options.registry.HeaderExtraElts = options.Class.extend({
 
     //--------------------------------------------------------------------------
     // Public
@@ -2270,6 +2258,21 @@ options.registry.HeaderNavbar = options.Class.extend({
         const signInOptionEl = this.el.querySelector('[data-customize-website-views="portal.user_sign_in"]');
         signInOptionEl.dataset.noPreview = 'true';
     },
+});
+
+options.registry.HeaderNavbar = options.Class.extend({
+    /**
+     * Particular case: we want the option to be associated on the header navbar
+     * in XML so that the related options only appear on navbar click (not
+     * header), in a different section, etc... but we still want the target to
+     * be the header itself.
+     *
+     * @constructor
+     */
+    init() {
+        this._super(...arguments);
+        this.setTarget(this.$target.closest('#wrapwrap > header'));
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 6c9e37b8e0d..9de540467f2 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -955,6 +955,47 @@
             data-page-option-name="header_text_color"/>
     </div>
 
+    <div data-js="HeaderExtraElts"
+         data-selector="#wrapwrap > header"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <we-row string="Elements" class="o_we_full_row align-items-start">
+            <we-button title="Show/hide text element" class="d-flex justify-content-center flex-grow-1"
+                    data-img="/website/static/src/img/snippets_options/header_extra_element_text.svg"
+                    data-customize-website-views="website.header_text_element"
+                    data-reset-view-arch="true"
+                    data-reload="/"/>
+            <we-button title="Show/hide language selector" class="fa fa-flag d-flex justify-content-center flex-grow-1"
+                    data-customize-website-views="website.header_language_selector"
+                    data-reset-view-arch="true"
+                    data-reload="/"/>
+            <we-button title="Show/hide search bar" class="fa fa-search d-flex justify-content-center flex-grow-1"
+                    data-customize-website-views="website.header_search_box"
+                    data-reset-view-arch="true"
+                    data-reload="/"/>
+            <we-button title="Show/hide sign in button" class="fa fa-sign-in d-flex justify-content-center flex-grow-1"
+                    data-customize-website-views="portal.user_sign_in"
+                    data-reload="/"
+                    data-no-preview="true"/>
+        </we-row>
+        <we-row string=" " class="o_we_full_row align-items-start mt-1">
+            <we-button title="Show/hide social links" class="flex-grow-1 d-flex justify-content-center"
+                    data-img="/website/static/src/img/snippets_options/header_extra_element_social.svg"
+                    data-customize-website-views="website.header_social_links"
+                    data-reset-view-arch="true"
+                    data-reload="/"/>
+            <we-button title="Show/hide button" class="flex-grow-1 d-flex justify-content-center"
+                    data-img="/website/static/src/img/snippets_options/header_extra_element_cta.svg"
+                    data-customize-website-views="website.header_call_to_action"
+                    data-reset-view-arch="true"
+                    data-reload="/"/>
+            <we-button title="Show/hide logo" class="flex-grow-1 d-flex justify-content-center"
+                    data-img="/website/static/src/img/snippets_options/header_extra_element_logo.svg"
+                    data-customize-website-views="website.option_header_brand_logo"
+                    data-reload="/"/>
+        </we-row>
+    </div>
+
     <!-- Header > Navbar Options -->
     <div data-js="HeaderNavbar"
          data-selector="#wrapwrap > header nav.navbar"
@@ -1020,10 +1061,6 @@
                        data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
             <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
         </we-select>
-
-        <we-checkbox string="Show Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/" data-no-preview="true"/>
-        <we-checkbox string="Call to Action" data-customize-website-views="website.header_call_to_action"
-                     data-reset-view-arch="true" data-reload="/"/>
         <we-select string="Language Selector" data-reload="/">
             <we-button data-name="header_language_selector_none_opt"
                        data-customize-website-views="">None</we-button>
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 81facfe8b0b..65f5246301a 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -210,10 +210,14 @@
         <div data-selector="#wrapwrap > header"
             data-no-check="true"
             groups="website.group_website_designer">
-            <we-checkbox string="Show Empty Cart"
-                         data-customize-website-views="website_sale.header_hide_empty_cart_link|"
-                         data-no-preview="true"
-                         data-reload="/"/>
+            <we-row string="Show Empty" class="o_we_full_row">
+                <div class="d-flex gap-1 mb-1 w-100">
+                    <we-button title="Show/hide shopping cart" class="o_btn_show_empty_cart fa fa-shopping-cart d-flex justify-content-center flex-grow-1"
+                            data-customize-website-views="website_sale.header_hide_empty_cart_link|"
+                            data-no-preview="true"
+                            data-reload="/"/>
+                </div>
+            </we-row>
         </div>
         <!-- Product image -->
         <div data-js="WebsiteSaleProductAttribute" data-selector="#product_detail .o_wsale_product_attribute" data-no-check="true">
diff --git a/addons/website_sale_wishlist/views/snippets.xml b/addons/website_sale_wishlist/views/snippets.xml
index 6d73fad0458..958fbb19105 100644
--- a/addons/website_sale_wishlist/views/snippets.xml
+++ b/addons/website_sale_wishlist/views/snippets.xml
@@ -2,15 +2,11 @@
 <odoo>
 
 <template id="snippet_options" inherit_id="website.snippet_options" name="Wishlist Snippet Options">
-    <xpath expr="." position="inside">
-        <div data-selector="#wrapwrap > header"
-            data-no-check="true"
-            groups="website.group_website_designer">
-            <we-checkbox string="Show Empty Wishlist"
-                         data-customize-website-views="website_sale_wishlist.header_hide_empty_wishlist_link|"
-                         data-no-preview="true"
-                         data-reload="/"/>
-        </div>
+    <xpath expr="//we-button[hasclass('o_btn_show_empty_cart')]" position="after">
+        <we-button title="Show/hide empty whishlist" class="fa fa-heart d-flex justify-content-center flex-grow-1"
+                    data-customize-website-views="website_sale_wishlist.header_hide_empty_wishlist_link|"
+                    data-no-preview="true"
+                    data-reload="/"/>
     </xpath>
     <xpath expr="//we-button[hasclass('o_we_add_to_cart_btn')]" position="after">
         <we-button title="Wishlist" class="fa fa-fw fa-heart"