[IMP] website: add templates for footer

Also remove all t-fields from footers to have only static contents in
footers. For social links, a controller is added so that a "static url"
/website/social/xxx always redirect to the correct set URL for the given
xxx social network.

Part of https://github.com/odoo/odoo/pull/38950
task-2087641

Co-authored-by: qsm-odoo <qsm@odoo.com>

6 files changed, 271 insertions, 35 deletions

diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 49f935e4cc3..9cc42507c92 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -218,6 +218,13 @@ class Website(Home):
         }
         return request.render('website.website_info', values)
 
+    @http.route(['/website/social/<string:social>'], type='http', auth="public", website=True, sitemap=False)
+    def social(self, social, **kwargs):
+        url = getattr(request.website, 'social_%s' % social, False)
+        if not url:
+            raise werkzeug.exceptions.NotFound()
+        return request.redirect(url)
+
     # ------------------------------------------------------
     # Edit
     # ------------------------------------------------------
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 72e21222e16..566da645e27 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -162,6 +162,7 @@ class Theme(models.AbstractModel):
                 'navbar-font-number': 'null',
                 'buttons-font-number': 'null',
                 'header-template': 'null',
+                'footer-template': 'null',
             }
         )
 
@@ -170,6 +171,13 @@ class Theme(models.AbstractModel):
         self.disable_view('website.template_header_hamburger_left')
         self.disable_view('website.template_header_navbar_text_center')
 
+        # Reinitialize footer templates
+        self.disable_view('website.template_footer_logo_about_us_below')
+        self.disable_view('website.template_footer_links_address_logo')
+        self.disable_view('website.template_footer_name_logo_links_about_us')
+        self.disable_view('website.template_footer_logo_only')
+        self.disable_view('website.template_footer_address_logo')
+
         # Call specific theme post copy
         theme_post_copy = '_%s_post_copy' % mod.name
         if hasattr(self, theme_post_copy):
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 7bf12649c90..673e26293f7 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -53,6 +53,7 @@ $o-base-website-values-palette: (
     'buttons-font-number': 1,
     'google-fonts': null,
     'header-template': 'logo_menu',
+    'footer-template': 'products_contacts_about_us',
 );
 $o-website-values-palettes: (
     (),
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 788958e51ff..6c76dac6179 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -787,22 +787,6 @@ header {
     @include make-container-max-widths($-mm-max-widths);
 }
 
-// Copyright
-.o_footer_copyright {
-    padding: 8px;
-    .js_language_selector {
-        display: inline-block;
-    }
-    @include media-breakpoint-up(md) {
-        .row {
-            display: flex;
-            > div {
-                margin: auto 0;
-            }
-        }
-    }
-}
-
 #wrapwrap.o_header_overlay {
     > header:not(.o_header_affix) {
         @include o-position-absolute(0, 0, auto, 0);
@@ -826,6 +810,48 @@ header {
         }
     }
 }
+
+// Footer Templates
+#footer {
+    @if o-website-value('footer-template') != 'products_contacts_about_us' {
+        @if o-website-value('footer-template') == 'logo_about_us_below' {
+            .o_footer_logo {
+                margin-top: $spacer;
+                margin-bottom: $spacer;
+            }
+            .o_footer_about_us {
+                margin-bottom: $spacer;
+            }
+        } @else if o-website-value('footer-template') == 'links_address_logo' {
+            &, p {
+                text-align: center;
+            }
+            &, ul, .o_footer_address, .o_footer_logo {
+                padding-top: $spacer;
+            }
+            li a {
+                text-transform: uppercase;
+            }
+        }
+    }
+}
+
+// Copyright
+.o_footer_copyright {
+    padding: 8px;
+    .js_language_selector {
+        display: inline-block;
+    }
+    @include media-breakpoint-up(md) {
+        .row {
+            display: flex;
+            > div {
+                margin: auto 0;
+            }
+        }
+    }
+}
+
 // Figure with special style
 .o_figure_relative_layout {
     position: relative;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 1f84556e1f1..a10f325ebc0 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -449,6 +449,32 @@
          data-no-check="true"
          groups="website.group_website_designer">
         <we-colorpicker string="Background" data-customize-website-color="" data-color="footer"/>
+        <we-select string="Footer Template" data-variable="footer-template" data-reload="/">
+            <we-button id="option_template_footer_products_contacts_about_us"
+                       data-customize-website-views="website.footer_custom"
+                       data-customize-website-variable="products_contacts_about_us"
+                       string="Products - Contacts - About us"/>
+            <we-button id="option_template_footer_logo_about_us_below"
+                       data-customize-website-views="website.template_footer_logo_about_us_below"
+                       data-customize-website-variable="logo_about_us_below"
+                       string="Logo - About us"/>
+            <we-button id="option_template_footer_links_address_logo"
+                       data-customize-website-views="website.template_footer_links_address_logo"
+                       data-customize-website-variable="links_address_logo"
+                       string="Links - Address - Logo"/>
+            <we-button id="option_template_footer_name_logo_links_about_us"
+                       data-customize-website-views="website.template_footer_name_logo_links_about_us"
+                       data-customize-website-variable="name_logo_links_about_us"
+                       string="Name - Logo - Links - About us"/>
+            <we-button id="option_template_footer_logo_only"
+                       data-customize-website-views="website.template_footer_logo_only"
+                       data-customize-website-variable="logo_only"
+                       string="Logo only"/>
+            <we-button id="option_template_footer_address_logo"
+                       data-customize-website-views="website.template_footer_address_logo"
+                       data-customize-website-variable="address_logo"
+                       string="Address - Logo"/>
+        </we-select>
     </div>
 
     <!-- Anchor Name -->
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index d7b2063ebd0..354e15871df 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -265,6 +265,7 @@
     </xpath>
 </template>
 
+<!-- Footer templates -->
 <template id="footer_custom" inherit_id="website.layout" name="Footer">
     <xpath expr="//div[@id='footer']" position="replace">
         <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
@@ -281,31 +282,155 @@
                             <h5>Connect with us</h5>
                             <ul class="list-unstyled">
                                 <li><a href="/contactus">Contact us</a></li>
-                                <li><i class="fa fa-phone"/> <span class="o_force_ltr" t-field="res_company.phone"/></li>
-                                <li><i class="fa fa-envelope"/>  <span t-field="res_company.email"/></li>
+                                <li><i class="fa fa-phone fa-fw"/> <span class="o_force_ltr"><a href="tel:1 (650) 691-3277">1 (650) 691-3277</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw"/>  <span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
                             </ul>
-                            <p>
-                                <a t-if="website.social_facebook" t-att-href="website.social_facebook" class="btn btn-sm btn-link"><i class="fa fa-2x fa-facebook-square"/></a>
-                                <a t-if="website.social_twitter" t-att-href="website.social_twitter" class="btn btn-sm btn-link"><i class="fa fa-2x fa-twitter"/></a>
-                                <a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="btn btn-sm btn-link"><i class="fa fa-2x fa-linkedin"/></a>
-                                <a t-if="website.social_youtube" t-att-href="website.social_youtube" class="btn btn-sm btn-link"><i class="fa fa-2x fa-youtube-play"/></a>
-                                <a t-if="website.social_github" t-att-href="website.social_github" class="btn btn-sm btn-link"><i class="fa fa-2x fa-github"/></a>
-                                <a t-if="website.social_instagram" t-att-href="website.social_instagram" class="btn btn-sm btn-link"><i class="fa fa-2x fa-instagram"/></a>
+                            <p class="o_footer_social_media_links">
+                                <a href="/website/social/facebook" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-facebook-square"/></a>
+                                <a href="/website/social/twitter" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-twitter"/></a>
+                                <a href="/website/social/linkedin" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-linkedin"/></a>
+                                <a href="/website/social/youtube" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-youtube-play"/></a>
+                                <a href="/website/social/github" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-github"/></a>
+                                <a href="/website/social/instagram" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-instagram"/></a>
                             </p>
                         </div>
                         <div class="col-lg-4">
-                            <h5>
-                                <span t-field="res_company.name"/>
-                                <small> - <a href="/aboutus">About us</a></small>
-                            </h5>
-                            <p>
+                            <div class="o_footer_about_us">
+                                <h5>
+                                    <span>YourCompany</span>
+                                    <small> - <a href="/aboutus">About us</a></small>
+                                </h5>
+                                <p>
+                                    We are a team of passionate people whose goal is to improve everyone's
+                                    life through disruptive products. We build great products to solve your
+                                    business problems.
+                                </p>
+                                <p>
+                                    Our products are designed for small to medium size companies willing to optimize
+                                    their performance.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Logo - About us (below)-->
+<template id="template_footer_logo_about_us_below" inherit_id="website.layout" name="Template Footer Logo About Us Below" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt16 pb8">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-5 o_footer_logo">
+                            <a href="/" class="footer-brand logo">
+                                <img src="website/static/src/img/website_logo.png" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img" style="width: 50%;"/>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-5">
+                            <div class="o_footer_about_us">
+                                <h5>
+                                    <span>YourCompany</span>
+                                    <small> - <a href="/aboutus">About us</a></small>
+                                </h5>
+                                <p>
+                                    We are a team of passionate people whose goal is to improve everyone's
+                                    life through disruptive products. We build great products to solve your
+                                    business problems.
+                                </p>
+                                <p>
+                                    Our products are designed for small to medium size companies willing to optimize
+                                    their performance.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="col-lg-7 text-lg-right">
+                            <p class="o_footer_social_media_links text-lg-right">
+                                <a href="/website/social/facebook" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-facebook-square"/></a>
+                                <a href="/website/social/twitter" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-twitter"/></a>
+                                <a href="/website/social/linkedin" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-linkedin"/></a>
+                                <a href="/website/social/youtube" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-youtube-play"/></a>
+                                <a href="/website/social/github" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-github"/></a>
+                                <a href="/website/social/instagram" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-instagram"/></a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Links - Address - Logo-->
+<template id="template_footer_links_address_logo" inherit_id="website.layout" name="Template Footer Links Address Logo" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt16 pb8">
+                <div class="container">
+                    <p class="o_footer_social_media_links">
+                        <a href="/website/social/facebook" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-facebook-square"/></a>
+                        <a href="/website/social/twitter" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-twitter"/></a>
+                        <a href="/website/social/linkedin" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-linkedin"/></a>
+                        <a href="/website/social/youtube" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-youtube-play"/></a>
+                        <a href="/website/social/github" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-github"/></a>
+                        <a href="/website/social/instagram" class="btn btn-sm btn-link" target="_blank"><i class="fa fa-2x fa-instagram"/></a>
+                    </p>
+                    <ul class="list-inline">
+                        <li class="list-inline-item"><a href="/">Home</a></li>
+                        <li class="list-inline-item"><a href="/contactus">Contact us</a></li>
+                        <li class="list-inline-item"><a href="/aboutus">About us</a></li>
+                    </ul>
+                    <div class="o_footer_address">
+                        250 Executive Park Blvd, Suite 3400<br/>San Francisco CA 94134<br/>United States
+                    </div>
+                    <div class="row">
+                        <div class="offset-md-3 col-md-6 o_footer_logo">
+                            <a href="/" class="footer-brand logo">
+                                <img src="website/static/src/img/website_logo.png" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img" style="width: 50%;"/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Website name - Logo - (below) Links - About us-->
+<template id="template_footer_name_logo_links_about_us" inherit_id="website.layout" name="Template Footer Name Logo Links About us" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt16 pb8">
+                <div class="container">
+                    <div class="row mt-2 mb-4">
+                        <div class="col-lg-6 mb-3 mb-lg-0">
+                            <h3><a href="/" class="text-decoration-none">YourCompany</a></h3>
+                        </div>
+                        <div class="col-lg-6 o_footer_logo text-center text-lg-right">
+                            <a href="/" class="footer-brand logo">
+                                <img src="website/static/src/img/website_logo.png" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img" style="width: 50%;"/>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-6">
+                            <ul class="list-inline">
+                                <li class="list-inline-item"><a href="/">Home</a></li>
+                                <li class="list-inline-item"><a href="/contactus">Contact us</a></li>
+                                <li class="list-inline-item"><a href="/aboutus">About us</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-6 text-lg-right">
+                            <p class="text-lg-right">
                                 We are a team of passionate people whose goal is to improve everyone's
                                 life through disruptive products. We build great products to solve your
-                                business problems.
-                            </p>
-                            <p>
-                                Our products are designed for small to medium size companies willing to optimize
-                                their performance.
+                                business problems. Our products are designed for small to medium size
+                                companies willing to optimize their performance.
                             </p>
                         </div>
                     </div>
@@ -315,6 +440,49 @@
     </xpath>
 </template>
 
+<!-- Logo only-->
+<template id="template_footer_logo_only" inherit_id="website.layout" name="Template Footer Logo Only" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt16 pb8">
+                <div class="container">
+                    <div class="row">
+                        <div class="offset-md-3 col-md-6 o_footer_logo text-center my-3">
+                            <a href="/" class="footer-brand logo">
+                                <img src="website/static/src/img/website_logo.png" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img" style="width: 50%;"/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Address - Logo (below)-->
+<template id="template_footer_address_logo" inherit_id="website.layout" name="Template Footer Address Logo" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt16 pb8 text-center">
+                <div class="container">
+                    <div class="m-4">
+                        YourCompany, 250 Executive Park Blvd, Suite 3400,<br/>
+                        San Francisco CA 94134, United States<br/>
+                        <a href="tel:+1 (650) 691-3277">+1 (650) 691-3277</a> - <a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a>
+                    </div>
+                    <div class="row">
+                        <div class="offset-lg-3 col-lg-6 o_footer_logo my-4">
+                            <a href="/" class="footer-brand logo">
+                                <img src="website/static/src/img/website_logo.png" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img" style="width: 50%;"/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
 <template id="cookies_bar" inherit_id="website.footer_custom" name="Cookies Bar">
     <xpath expr="//div[@id='footer']" position="before">
         <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar">