From c7ff507f5e20600a17b1601a04c1702848eafa66 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 31 Mar 2023 13:48:03 +0200
Subject: [PATCH] [IMP] website, *: add `sales_four` header

*: website_sale, website_sale_wishlist

task-3060986

Part-of: odoo/odoo#119650
---
 addons/website/models/theme_models.py         |   1 +
 .../header_template_sales_four.svg            |   1 +
 .../static/src/scss/primary_variables.scss    |   2 +
 .../static/src/scss/secondary_variables.scss  |   1 +
 addons/website/static/src/scss/website.scss   |   8 +-
 addons/website/views/snippets/snippets.xml    |  18 +++-
 addons/website/views/website_templates.xml    | 101 ++++++++++++++++++
 addons/website_sale/views/templates.xml       |  10 ++
 .../views/website_sale_wishlist_template.xml  |  10 ++
 9 files changed, 148 insertions(+), 4 deletions(-)
 create mode 100644 addons/website/static/src/img/snippets_options/header_template_sales_four.svg

diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 0e2568bceb5..5f7bcc97fd8 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -231,6 +231,7 @@ class Theme(models.AbstractModel):
         'website.template_header_sales_one',
         'website.template_header_sales_two',
         'website.template_header_sales_three',
+        'website.template_header_sales_four',
         # Default one, keep it last
         'website.template_header_default',
     ]
diff --git a/addons/website/static/src/img/snippets_options/header_template_sales_four.svg b/addons/website/static/src/img/snippets_options/header_template_sales_four.svg
new file mode 100644
index 00000000000..394193b99e7
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_sales_four.svg
@@ -0,0 +1 @@
+<svg width="234" height="60" viewBox="0 0 234 60" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".5" d="M0 5h234v50H0z"/><path fill="url(#header_preview_sales_four__a)" d="M0 5h234v34H0z"/><path d="M108.082 29.708v-1.865h-3.708v-5.714H102v7.58l6.082-.001Zm3.945.13c.852 0 1.565-.158 2.136-.473a3.208 3.208 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491Zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964v-3.232h-3.67v1.577h1.589v.714c-.261.16-.538.29-.828.388a2.518 2.518 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.476 2.476 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.34 3.34 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.172 3.172 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46Zm8.244 0c.853 0 1.565-.158 2.136-.473a3.208 3.208 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491Z" fill="#fff"/><rect x="204" y="22" width="8" height="8" rx="1" fill="#fff"/><rect x="194" y="22" width="8" height="8" rx="1" fill="#fff"/><rect x="214" y="22" width="8" height="8" rx="1" fill="#fff"/><path fill-opacity=".33" d="M0 5h234v8H0z"/><rect x="206" y="7" width="4" height="4" rx="1" fill="#fff"/><rect x="212" y="7" width="4" height="4" rx="1" fill="#fff"/><rect x="218" y="7" width="4" height="4" rx="1" fill="#fff"/><rect x="12" y="7" width="12" height="4" rx="1" fill="#fff"/><rect x="26" y="7" width="18" height="4" rx="1" fill="#fff"/><rect x="46" y="7" width="12" height="4" rx="1" fill="#fff"/><rect x="12" y="20" width="40" height="12" rx="6" fill="#fff"/><path d="M33.786 25.286a2.41 2.41 0 0 0-.734-1.767 2.408 2.408 0 0 0-1.766-.733 2.41 2.41 0 0 0-1.767.733 2.408 2.408 0 0 0-.733 1.767c0 .688.244 1.277.733 1.766.49.49 1.078.734 1.767.734.688 0 1.277-.245 1.766-.734.49-.49.734-1.078.734-1.766Zm2.857 4.642c0 .194-.07.361-.212.503a.687.687 0 0 1-.502.212.662.662 0 0 1-.503-.212l-1.914-1.909a3.822 3.822 0 0 1-2.226.692 3.86 3.86 0 0 1-1.527-.31 3.925 3.925 0 0 1-1.255-.837 3.928 3.928 0 0 1-.837-1.255 3.861 3.861 0 0 1-.31-1.526c0-.532.103-1.041.31-1.527a3.91 3.91 0 0 1 .837-1.255c.351-.352.77-.63 1.255-.837.486-.207.995-.31 1.527-.31.532 0 1.04.103 1.526.31.485.206.904.485 1.256.837.351.351.63.77.837 1.255.206.486.31.995.31 1.527 0 .818-.231 1.56-.693 2.226l1.914 1.914a.684.684 0 0 1 .207.503Z" fill="#35979C"/><defs><linearGradient id="header_preview_sales_four__a" x1="0" y1="5" x2="234.841" y2="31.566" gradientUnits="userSpaceOnUse"><stop stop-color="#357C83"/><stop offset="1" stop-color="#01A09D"/></linearGradient></defs></svg>
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index d8cf687df80..3c1994a3bf9 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -14,6 +14,8 @@ $o-base-color-palette: map-merge($o-base-color-palette, (
     'header-sales_two-custom': null,
     'header-sales_three': 2,
     'header-sales_three-custom': null,
+    'header-sales_four': 1,
+    'header-sales_four-custom': null,
     'footer': 5, // o_cc5
     'footer-custom': null,
     'copyright': null,
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index ba6bd705900..09ea82423a8 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -148,6 +148,7 @@ $-actual-user-color-palette: map-merge($-palette-default, $o-user-color-palette)
     'header-sales_one': 'header-sales_one-custom',
     'header-sales_two': 'header-sales_two-custom',
     'header-sales_three': 'header-sales_three-custom',
+    'header-sales_four': 'header-sales_four-custom',
     'footer': 'footer-custom',
     'copyright': 'copyright-custom'
 ) {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 2a2e9a70b0c..95d149206ec 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -55,7 +55,7 @@ $-seen-urls: ();
     // 3) The values in the $colors map are also printed by Bootstrap. However,
     // we have color variables which can contain a reference to a color
     // combination and that is the info we want in that case.
-    @each $key in ('menu', 'header-sales_one', 'header-sales_two', 'header-sales_three', 'footer', 'copyright') {
+    @each $key in ('menu', 'header-sales_one', 'header-sales_two', 'header-sales_three', 'header-sales_four', 'footer', 'copyright') {
         $-value: map-get($o-color-palette, $key);
         @if type-of($-value) == 'number' {
             @include print-variable($key, $-value);
@@ -1227,6 +1227,12 @@ header {
         @include o-apply-colors('header-sales_three-custom');
         @include o-add-gradient('menu-secondary-gradient');
     }
+} @else if o-website-value('header-template') == 'sales_four' {
+    #wrapwrap .o_header_sales_four_bot {
+        @include o-apply-colors('header-sales_four');
+        @include o-apply-colors('header-sales_four-custom');
+        @include o-add-gradient('menu-secondary-gradient');
+    }
 }
 
 .o_grid_header_3_cols {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 1b2de8ff25d..3b1f87f10ee 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -781,6 +781,11 @@
                        data-customize-website-views="website.template_header_sales_three"
                        data-customize-website-variable="'sales_three'"
                        data-img="/website/static/src/img/snippets_options/header_template_sales_three.svg"/>
+            <we-button title="Menu - Sales 4"
+                       data-name="header_sales_four_opt"
+                       data-customize-website-views="website.template_header_sales_four"
+                       data-customize-website-variable="'sales_four'"
+                       data-img="/website/static/src/img/snippets_options/header_template_sales_four.svg"/>
             <we-button title="Sidebar"
                        data-name="header_sidebar_opt"
                        data-customize-website-views="website.template_header_sidebar, website.no_autohide_menu"
@@ -840,6 +845,13 @@
                             data-null-value="'NULL'"
                             data-with-combinations="customizeWebsiteColor"
                             data-with-gradients="true"/>
+            <we-colorpicker data-dependencies="header_sales_four_opt"
+                            data-customize-website-color="" data-color="header-sales_four"
+                            data-customize-website-layer2-color="" data-layer-color="header-sales_four-custom" data-layer-gradient="menu-secondary-gradient"
+                            data-no-bundle-reload="true"
+                            data-null-value="'NULL'"
+                            data-with-combinations="customizeWebsiteColor"
+                            data-with-gradients="true"/>
         </we-row>
     </div>
 
@@ -983,15 +995,15 @@
             <!-- Generic alignment option controling all the template at once. -->
             <!-- Currently needed to be this way as the SCSS variable controls -->
             <!-- the mobile alignement which is the same for all templates. -->
-            <we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment" data-dependencies="header_default_opt, header_hamburger_opt, header_boxed_opt, header_stretch_opt, header_search_opt, header_sales_one_opt, header_sales_two_opt">
+            <we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment" data-dependencies="header_default_opt, header_hamburger_opt, header_boxed_opt, header_stretch_opt, header_search_opt, header_sales_one_opt, header_sales_two_opt, header_sales_four_opt">
                 <we-button data-customize-website-views=""
                            data-customize-website-variable="'left'"
                            data-icon="fa-align-left"/>
-                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_boxed_align_center, website.template_header_stretch_align_center, website.template_header_search_align_center, website.template_header_sales_one_align_center, website.template_header_sales_two_align_center"
+                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_boxed_align_center, website.template_header_stretch_align_center, website.template_header_search_align_center, website.template_header_sales_one_align_center, website.template_header_sales_two_align_center, website.template_header_sales_four_align_center"
                            data-customize-website-variable="'center'"
                            data-icon="fa-align-center"
                            data-dependencies="!header_hamburger_opt"/>
-                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_boxed_align_right, website.template_header_stretch_align_right, website.template_header_search_align_right, website.template_header_sales_one_align_right, website.template_header_sales_two_align_right"
+                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_boxed_align_right, website.template_header_stretch_align_right, website.template_header_search_align_right, website.template_header_sales_one_align_right, website.template_header_sales_two_align_right, website.template_header_sales_four_align_right"
                            data-customize-website-variable="'right'"
                            data-icon="fa-align-right"/>
             </we-select>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 072adfdbd46..286b7181245 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1154,6 +1154,107 @@
     </xpath>
 </template>
 
+<!-- "Sales four" template -->
+<template id="template_header_sales_four" inherit_id="website.layout" name="Template Header Sale 4" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <t t-call="website.navbar">
+            <t t-set="_navbar_classes" t-valuef="o_header_sales_four_top d-none d-lg-block p-0 shadow-sm z-index-1"/>
+
+            <div id="top_menu_container">
+                <div aria-label="Top" class="container d-flex">
+                    <!-- Navbar -->
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-valuef="align-items-center me-auto pe-3"/>
+
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-valuef="nav-item small"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
+                            </t>
+                        </t>
+                    </t>
+                    <ul class="o_header_separator navbar-nav align-items-center gap-3 flex-shrink-0">
+                        <!-- Text element -->
+                        <t t-call="website.placeholder_header_text_element">
+                            <t t-set="_txt_elt_content" t-valuef="mail"/>
+                            <t t-set="_div_class" t-valuef="d-flex align-items-center"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
+                            <t t-set="_item_class" t-valuef="position-relative"/>
+                        </t>
+                        <!-- Social -->
+                        <t t-call="website.header_social_links_no_color">
+                            <t t-set="_div_class" t-valuef="d-flex align-items-center"/>
+                            <t t-set="_item_class" t-valuef="position-relative"/>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-valuef="position-relative"/>
+                            <t t-set="_link_class" t-valuef="btn btn-outline-secondary d-flex align-items-center h-100 border-0"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-valuef="dropdown position-relative d-flex align-items-center"/>
+                            <t t-set="_link_class" t-valuef="nav-link border-0"/>
+                            <t t-set="_user_name_class" t-valuef="small"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
+                        </t>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="position-relative"/>
+                            <t t-set="_btn_class" t-valuef="nav-link"/>
+                            <t t-set="_txt_class" t-valuef="small"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
+                        </t>
+                    </ul>
+                </div>
+                <div aria-label="Bottom" class="o_header_sales_four_bot z-index-0">
+                    <div class="container">
+                        <ul class="navbar-nav d-grid align-items-center py-2 o_grid_header_3_cols">
+                            <!-- Search bar -->
+                            <li class="o_header_sales_four_search_placeholder" t-if="is_view_active('website.header_search_box') == False"/>
+                            <t t-call="website.placeholder_header_search_box">
+                                <t t-set="_form_classes" t-valuef="me-auto"/>
+                                <t t-set="_input_classes" t-valuef="rounded-start-pill ps-3 text-bg-light"/>
+                                <t t-set="_submit_classes" t-valuef="rounded-end-pill bg-o-color-3 lh-1"/>
+                                <t t-set="_item_class" t-valuef="d-flex"/>
+                            </t>
+                            <!-- Brand -->
+                            <li t-if="is_view_active('website.placeholder_header_brand')">
+                            <t t-call="website.placeholder_header_brand">
+                                <t t-set="_link_class" t-valuef="mx-auto mw-100"/>
+                            </t>
+                            </li>
+                            <li class="d-flex align-items-center gap-3 ms-auto mb-0">
+                                <ul class="navbar-nav gap-2">
+                                    <!-- Call To Action -->
+                                    <t t-call="website.header_call_to_action_pill"/>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </t>
+        <t t-call="website.template_header_mobile">
+            <t t-set="_txt_elt_content" t-valuef="mail"/>
+        </t>
+    </xpath>
+</template>
+
+<template id="template_header_sales_four_align_center" inherit_id="website.template_header_sales_four" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-valuef="align-items-center mx-auto px-3"/>
+    </xpath>
+</template>
+
+<template id="template_header_sales_four_align_right" inherit_id="website.template_header_sales_four" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-valuef="align-items-center ms-auto pe-3"/>
+    </xpath>
+</template>
+
 <template id="template_header_sidebar" inherit_id="website.layout" name="Template Header Sidebar" active="False">
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="o_header_sidebar" separator=" "/>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 5fc680f447e..92ea420acf9 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -128,6 +128,16 @@
         </xpath>
     </template>
 
+    <template id="template_header_sales_four" inherit_id="website.template_header_sales_four">
+        <xpath expr="//t[@t-call='website.header_call_to_action_pill']" position="before">
+            <t t-call="website_sale.header_cart_link">
+                <t t-set="_icon" t-value="True"/>
+                <t t-set="_link_class" t-value="'o_navlink_background_hover btn position-relative rounded-pill p-1 text-reset'"/>
+                <t t-set="_badge_class" t-value="'position-absolute top-0 end-0 mt-n1 me-n1 rounded-pill'"/>
+            </t>
+        </xpath>
+    </template>
+
     <template id="template_header_sidebar" inherit_id="website.template_header_sidebar">
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 691abbd9337..2949b636997 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -152,6 +152,16 @@
         </xpath>
     </template>
 
+    <template id="template_header_sales_four" inherit_id="website_sale.template_header_sales_four">
+        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
+            <t t-call="website_sale_wishlist.header_wishlist_link">
+                <t t-set="_icon" t-value="True"/>
+                <t t-set="_link_class" t-value="'o_navlink_background_hover btn position-relative rounded-pill p-1 text-reset'"/>
+                <t t-set="_badge_class" t-value="'position-absolute top-0 end-0 mt-n1 me-n1 rounded-pill'"/>
+            </t>
+        </xpath>
+    </template>
+
     <template id="template_header_sidebar" inherit_id="website_sale.template_header_sidebar">
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">