[FIX] gamification: email template for challenges (#18265)

* [IMP] Gamification: email template

- new template for challenges for both personal and ranking mode.

1 files changed, 234 insertions, 68 deletions

diff --git a/addons/gamification/data/goal_base.xml b/addons/gamification/data/goal_base.xml
index 06aede03c49..3b983ebd256 100644
--- a/addons/gamification/data/goal_base.xml
+++ b/addons/gamification/data/goal_base.xml
@@ -20,76 +20,242 @@
         <record id="simple_report_template" model="mail.template">
             <field name="name">Simple Challenge Report Progress</field>
             <field name="model_id" ref="gamification.model_gamification_challenge"/>
-            <field name="body_html"><![CDATA[
-<p>
-    <strong>${object.name}</strong>
-</p>
-<p class="oe_grey">The following message contains the current progress for the challenge ${object.name}</p>
-
-% if object.visibility_mode == 'personal':
-    <table width="100%" border="1">
-    <tr>
-        <th>Goal</th>
-        <th>Target</th>
-        <th>Current</th>
-        <th>Completeness</th>
-    </tr>
-    % for line in ctx["challenge_lines"]:
-        <tr
-            % if line['completeness'] >= 100:
-                style="font-weight:bold;"
-            % endif
-            >
-            <td>${line['name']}</td>
-            <td>${line['target']}
-            % if line['suffix']:
-                ${line['suffix']}
-            % endif
-            </td>
-            <td>${line['current']}
-            % if line['suffix']:
-                ${line['suffix']}
-            % endif
-            </td>
-            <td>${line['completeness']} %</td>
-        </tr>
-    % endfor
-    </table>
-% else:
-    % for line in ctx["challenge_lines"]:
-        <table width="100%" border="1">
-            <tr>
-                <th colspan="4">${line['name']}</th>
-            </tr>
-            <tr>
-                <th>#</th>
-                <th>Person</th>
-                <th>Completeness</th>
-                <th>Current</th>
-            </tr>
-            % for goal in line['goals']:
-                <tr
-                    % if goal.completeness >= 100:
-                        style="font-weight:bold;"
-                    % endif
-                    >
-                    <td>${goal['rank']}</td>
-                    <td>${goal['name']}</td>
-                    <td>${goal['completeness']}%</td>
-                    <td>${goal['current']}/${line['target']}
-                    % if line['suffix']:
-                        ${line['suffix']}
-                    % endif
-                    </td>
-                </tr>
-            % endfor
+            <field name="body_html">
+                <![CDATA[ 
+% set record = ctx.get('record')
+% set company = record and record.company_id or user.company_id
+% set challenge_lines = ctx.get('challenge_lines', [])     
+<table cellspacing="0" cellpadding="0" width="100%" style="font-family: 'Helvetica'; background-color: #EEE; border-collapse: collapse;">
+<tr>
+    <td valign="top" align="center">
+        <table cellspacing="0" cellpadding="0" width="600" style="margin: 0 auto; width: 600px;">
+            <tr><td>
+                <table cellspacing="0" cellpadding="0" width="100%">
+                    <tr>
+                        <td valign="middle" align="left" style="padding:30px 15px;">
+                            <img width="90" src="/logo.png?company=${user.company_id.id}" style="width:80px;"/>
+                        </td>
+                        % if object.visibility_mode == 'ranking':
+                            <td style="padding:15px;">
+                                <p style="font-size:20px;color:#666666;" align="right">Leaderboard</p>
+                            </td>
+                        % endif
+                    </tr>
+                </table>
+                <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#fff" style="background-color:#fff;">
+                    <tr><td style="padding: 15px;">
+                        % if object.visibility_mode == 'personal':
+                            <span style="color:#666666;font-size:13px;">Here is your current progress in the challenge <strong>${object.name}</strong>.</span>
+                            <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:20px;">
+                                <tr>
+                                    <td align="center">
+                                        <p style="font-size:27px;color:#666666;">Personal Performance</p>
+                                    </td>
+                                </tr>
+                            </table>
+                            <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:30px;color:#666666;">
+                                <thead>
+                                    <tr style="color:#9A6C8E; font-size:12px;">
+                                        <th align="left" style="padding-bottom: 0px;width:40%;text-align:left;">Goals</th>
+                                        <th style="width:20%;text-align:right;" align="left">Target</th>
+                                        <th style="width:20%;text-align:right;" align="right">Current</th>
+                                        <th style="width:20%;text-align:right;" align="right">Completeness</th>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="5" style="height:1px;background-color:#9A6C8E;"></td>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                % for line in challenge_lines:
+                                    <tr
+                                        % if line['completeness'] >= 100:
+                                            style="font-weight:bold;"
+                                        % endif
+                                        >
+                                        <td style="padding: 20px 0;" align="left">
+                                            ${line['name']}
+                                            % if line['suffix'] or line['monetary']:
+                                                (${line['full_suffix']})
+                                            % endif
+                                        </td>
+                                        <td style="padding: 20px 0;" align="right">${"%.2f" % line['target']}
+                                            % if line['suffix']:
+                                                ${line['suffix']}
+                                            % endif
+                                        </td>
+                                        <td style="padding: 20px 0;" align="right">${"%.2f" % line['current']}
+                                            % if line['suffix']:
+                                                ${line['suffix']}
+                                            % endif
+                                        </td>
+                                        <td style="padding: 20px 0;font-size:25px;color:#9A6C8E;" align="right"><strong>${line['completeness']| int}%</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="5" style="height:1px;background-color:#e3e3e3;"></td>
+                                    </tr>
+                                % endfor        
+                                </tbody>
+                            </table>                   
+                        % else: 
+                            <span style="color:#A8A8A8;font-size:13px;">
+                                The following message contains the current progress for the challenge <strong>${object.name}</strong>.
+                            </span> 
+                            % for line in challenge_lines:
+                                <!-- Header + Button table -->
+                                <table cellspacing="0" cellpadding="0" width="100%"style="margin-top:35px;">
+                                    <tr>
+                                        <td width="50%">
+                                            <p style="font-size:22px;color:#666666;">Top Achievers for goal <strong>${line['name']}</strong></p>
+                                        </td>
+                                    </tr>
+                                </table>
+                                <!-- Podium -->
+                                % if len(line['goals'])>2:
+                                    <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:10px;">
+                                        <tr><td style="padding:0 30px;">
+                                            <table cellspacing="0" cellpadding="0" width="100%">
+                                                <tr>
+                                                    % set top_goals = [line['goals'][1], line['goals'][0], line['goals'][2]]
+                                                    % for goal in top_goals:
+                                                        <td align="center" style="width:32%;">
+                                                            % if loop.index == 1:
+                                                                % set extra_div = '<div style="height:40px;"></div>'
+                                                                % set heightA = 95
+                                                                % set heightB = 75
+                                                                % set bgColor = '#b898b0'
+                                                                % set fontSize = 50
+                                                                % set podiumPosition = '2'
+                                                            % elif loop.index == 2:
+                                                                % set extra_div = ''
+                                                                % set heightA = 55
+                                                                % set heightB = 115
+                                                                % set bgColor = '#9A6C8E'
+                                                                % set fontSize = 85
+                                                                % set podiumPosition = '1'
+                                                            % elif loop.index == 3:
+                                                                % set extra_div = '<div style="height:60px;"></div>'
+                                                                % set heightA = 115
+                                                                % set heightB = 55
+                                                                % set bgColor = '#c8afc1'
+                                                                % set fontSize = 35
+                                                                % set podiumPosition = '3'
+                                                            % endif
+                                                            <div style="margin:0 3px 0 3px;height:220px;">
+                                                                <div style="height:${heightA}px;">
+                                                                    ${extra_div | safe}   
+                                                                    <div style="height:55px;">
+                                                                        <img style="margin-bottom:5px;width:50px;height:50px;border-radius:50%;" src="/web/image?model=res.users&amp;field=image_small&amp;id=${goal['user_id']}" alt=""/>
+                                                                    </div> 
+                                                                    <div align="center" style ="color:${bgColor};">
+                                                                        ${goal['name']}
+                                                                    </div 
+                                                                </div>
+                                                                <div style="background-color:${bgColor | safe};height:${heightB}px;">
+                                                                    <strong><span style="color:#fff;font-size:${fontSize}px;">${podiumPosition | safe}</span></strong>
+                                                                </div>
+                                                                <div style="height:30px;">
+                                                                    <p style="color:#9A6C8E;font-size:20px;margin-top:10px;">
+                                                                        ${"%.2f" % goal['current']}
+                                                                        % if line['suffix'] or line['monetary']:
+                                                                            ${line['full_suffix']}
+                                                                        % endif
+                                                                    </p>
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    % endfor
+                                                </tr>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                % endif
+                                <!-- data table -->
+                                <table cellspacing="0" cellpadding="0" width="100%" style="margin-bottom:5px">
+                                    <tr>
+                                        <td>
+                                            <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:30px;margin-bottom:5px;color:#666666;">
+                                                <thead>
+                                                    <tr style="color:#9A6C8E; font-size:12px;">
+                                                        <th style="width:10%;text-align:center;">Rank</th>
+                                                        <th style="width:15%;text-align:left;">Name</th>
+                                                        <th style="width:30%;text-align:right;">Performance 
+                                                            % if line['suffix']:
+                                                                (${line['suffix']})
+                                                            % elif line['monetary']:
+                                                                (${company.currency_id.symbol})
+                                                            % endif
+                                                        </th>
+                                                        <th style="width:30%;text-align:right;"">Completeness</th>
+                                                    </tr>
+                                                    <tr>
+                                                        <td colspan="5" style="height:1px;background-color:#9A6C8E;"></td>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    % for goal in line['goals']:
+                                                        <tr>
+                                                            % set tdBgColor = '#fff'
+                                                            % set tdColor = 'gray'
+                                                            % set mutedColor = '#AAAAAA'
+                                                            % set tdPercentageColor = '#9A6C8E'
+                                                            <td width="10%" align="center" valign="middle" style="background-color:${tdBgColor};padding :5px 0;font-size:20px;">${goal['rank']+1}
+                                                            </td>
+                                                            <td width="15%" align="left" valign="middle" style="background-color:${tdBgColor};padding :5px 0;font-size:13px;">${goal['name']}</td>
+                                                            <td width="20%" align="right" style="background-color:${tdBgColor};padding:5px 0;line-height:1;">${"%.2f" % goal['current']}<br/><span style="font-size:13px;color:${mutedColor};">on ${"%.2f" % line['target']}</span>
+                                                            </td>
+                                                            <td width="20%" style="color:${tdPercentageColor};background-color:${tdBgColor};padding-right:15px;font-size:22px;" align="right"><strong>${goal['completeness'] | int}%</strong></td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td colspan="5" style="height:1px;background-color:#DADADA;"></td>
+                                                        </tr>
+                                                    % endfor
+                                                </tbody>
+                                            </table>
+                                        </td>
+                                    </tr>
+                                </table> 
+                            % endfor
+                        % endif
+                    </td></tr>
+                </table>
+                <table cellspacing="0" cellpadding="0" width="100%" style="padding: 15px; color: #666666;margin-bottom: 5px;">
+                    <tr>
+                        <td align="center" style="min-width: 590px;">
+                            <table width="580" border="0" cellpadding="0" style="min-width: 580px; font-size: 12px;">
+                                <tr>
+                                    <td valign="middle" align="left" style="padding-top: 10px; padding-bottom: 10px;">
+                                        ${company.name}<br/>
+                                        ${company.phone or ''}
+                                    </td>
+                                    <td valign="middle" align="right" style="padding-top: 10px; padding-bottom: 10px;">
+                                        % if company.email:
+                                            <a href="mailto:${company.email}" style="text-decoration:none; color: #666666;">${company.email}</a><br/>
+                                        % endif
+                                        % if company.website:
+                                            <a href="${company.website}" style="text-decoration:none; color: #666666;">
+                                               ${company.website}
+                                            </a>
+                                        % endif
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr> 
+                    <tr>
+                        <td align="center">
+                            Powered by <a target="_blank" href="https://www.odoo.com">Odoo</a>.
+                        </td>
+                    </tr>
+                </table>
+            </td></tr>
         </table>
+    </td>
+</tr>
+</table>
+            ]]>
 
-        <br/><br/>
-
-    % endfor
-% endif
-            ]]></field>
+</field>
         </record>
 
         <!-- goal definitions -->