From 75231185a4b409e087916e706bbdff9ae57a6cb9 Mon Sep 17 00:00:00 2001
From: amdi-odoo <amdi@odoo.com>
Date: Thu, 30 Mar 2023 08:39:35 +0000
Subject: [PATCH] [IMP] iap_mail: improve lead enrichment message

Purpose
=======
Improve the display of the lead enrichment message
appearing in the chatter after an enrichment.

Specification
=============
In the enrichment chatter message:

- Remove the display of the company logo if the
company doesn't have any.
( Using alt="" to avoid displaying both image and text
placeholders if logo url exists but leads to a blank page)

- Fix the info alignment when having long characters.
- Add the twitter URL next to the followers count in
the enrichment info.

Task-3204763

Part-of: odoo/odoo#115326
---
 addons/iap_mail/__manifest__.py               |  1 +
 addons/iap_mail/data/mail_templates.xml       | 32 +++++++++++--------
 addons/iap_mail/static/src/scss/iap_mail.scss |  4 +++
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 addons/iap_mail/static/src/scss/iap_mail.scss

diff --git a/addons/iap_mail/__manifest__.py b/addons/iap_mail/__manifest__.py
index 062096d255d..5d94753debb 100644
--- a/addons/iap_mail/__manifest__.py
+++ b/addons/iap_mail/__manifest__.py
@@ -20,6 +20,7 @@
     'assets': {
         'web.assets_backend': [
             'iap_mail/static/src/js/**/*',
+            'iap_mail/static/src/scss/iap_mail.scss',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/iap_mail/data/mail_templates.xml b/addons/iap_mail/data/mail_templates.xml
index 3deb23a99ce..5f7bc9e05c6 100644
--- a/addons/iap_mail/data/mail_templates.xml
+++ b/addons/iap_mail/data/mail_templates.xml
@@ -23,19 +23,19 @@
                 </h4>
                 <p t-esc="description"/>
             </div>
-            <div class="col-sm-2 p-0 text-center text-md-end order-first order-md-last">
-                <img t-attf-src="{{logo}}" alt="Company Logo" style="max-width: 80px;"/>
+            <div t-if="logo" class="col-sm-2 p-0 text-center text-md-end order-first order-md-last">
+                <img t-attf-src="{{logo}}" alt="" style="max-width: 80px;"/>
             </div>
             </div>
             <hr/>
 
             <div class="col-sm-12 row m-0 p-0">
-                <div t-if="company_type" class="my-1 p-0 col-sm-3">
+                <div t-if="company_type" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-building text-primary"/>
                     <b>Company type</b>
                 </div>
                 <div t-if="company_type" class="my-1 col-sm-9" t-esc="company_type" />
-                <div t-if="founded_year" class="my-1 p-0 col-sm-3">
+                <div t-if="founded_year" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-calendar text-primary"/>
                     <b>Founded</b>
                 </div>
@@ -45,7 +45,7 @@
                 <t t-if="industry" t-set="sectors" t-value="sectors + [industry]" />
                 <t t-if="industry_group" t-set="sectors" t-value="sectors + [industry_group]" />
                 <t t-if="sub_industry" t-set="sectors" t-value="sectors + [sub_industry]" />
-                <div t-if="sectors" class="my-1 p-0 col-sm-3">
+                <div t-if="sectors" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-industry text-primary"/>
                     <b>Sectors</b>
                 </div>
@@ -54,19 +54,19 @@
                         <label t-esc="inner_sector" style="font-weight:normal; padding: 2px 10px; background-color: #eeeeee; margin: 1px 0px; border-radius: 13px; display: inline-block;"/>
                     </t>
                 </div>
-                <div t-if="employees" class="my-1 p-0 col-sm-3">
+                <div t-if="employees" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-users text-primary"/>
                     <b>Employees</b>
                 </div>
                 <div t-if="employees" class="my-1 col-sm-9" t-esc="'%.0f' % employees" />
-                <div t-if="estimated_annual_revenue" class="my-1 p-0 col-sm-3">
+                <div t-if="estimated_annual_revenue" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-money text-primary"/>
                     <b>Estimated revenue</b>
                 </div>
                 <div t-if="estimated_annual_revenue" class="my-1 col-sm-9">
                     <span t-esc="estimated_annual_revenue" /><span> per year</span>
                 </div>
-                <div t-if="phone_numbers" class="my-1 p-0 col-sm-3">
+                <div t-if="phone_numbers" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-phone text-primary"/>
                     <b>Phone</b>
                 </div>
@@ -75,7 +75,7 @@
                         <a t-attf-href="tel:{{phone_number}}" t-esc="phone_number" style="font-weight:normal; padding: 2px 10px; background-color: #eeeeee; margin: 1px 0px; border-radius: 13px; display: inline-block;"/>
                     </t>
                 </div>
-                <div t-if="email" class="my-1 p-0 col-sm-3">
+                <div t-if="email" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-envelope text-primary"/>
                     <b>Email</b>
                 </div>
@@ -84,12 +84,12 @@
                         <a target="_top" t-attf-href="mailto:{{email_item}}" t-esc="email_item" style="font-weight:normal; padding: 2px 10px; background-color: #eeeeee; margin: 1px 0px; border-radius: 13px; display: inline-block;"/>
                     </t>
                 </div>
-                <div t-if="timezone" class="my-1 p-0 col-sm-3">
+                <div t-if="timezone" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-globe text-primary"/>
                     <b>Timezone</b>
                 </div>
                 <div t-if="timezone" class="my-1 col-sm-9" t-esc="timezone.replace('_', ' ')" />
-                <div t-if="tech" class="my-1 p-0 col-sm-3">
+                <div t-if="tech" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-cube text-primary"/>
                     <b>Technologies Used</b>
                 </div>
@@ -98,12 +98,18 @@
                         <label t-esc="tech_item.replace('_', ' ').title()" style="font-weight:normal; padding: 2px 10px; background-color: #eeeeee; margin: 1px 0px; border-radius: 13px; display: inline-block;"/>
                     </t>
                 </div>
-                <div t-if="twitter_bio" class="my-1 p-0 col-sm-3">
+                <div t-if="twitter_bio" class="d-flex my-1 p-0 col-sm-3">
                     <i class="fa fa-fw me-2 fa-twitter text-primary"/>
                     <b>Twitter</b>
                 </div>
                 <div t-if="twitter_bio" class="my-1 col-sm-9">
-                    <div t-if="twitter_followers"><t t-esc="twitter_followers"/> followers</div>
+                    <div class="d-flex gap-2">
+                        <a t-if="twitter" target="_blank" t-attf-href="http://www.twitter.com/{{twitter}}">
+                            http://www.twitter.com/<t t-esc="twitter"/>
+                        </a>
+                        <span t-if="twitter"> • </span>
+                        <div t-if="twitter_followers"><t t-esc="twitter_followers"/> followers</div>
+                    </div>
                     <div t-esc="twitter_bio" />
                 </div>
             </div>
diff --git a/addons/iap_mail/static/src/scss/iap_mail.scss b/addons/iap_mail/static/src/scss/iap_mail.scss
new file mode 100644
index 00000000000..727487e6f7d
--- /dev/null
+++ b/addons/iap_mail/static/src/scss/iap_mail.scss
@@ -0,0 +1,4 @@
+.o_partner_autocomplete_enrich_info i {
+    /* To prevent the icons from being cropped when there is not enough available space */
+    min-width: fit-content;
+}