[REF] website_sale: tokenization - improve desgin

Update design for registered cards

@courtesy of @fhe-odoo

4 files changed, 57 insertions, 34 deletions

diff --git a/addons/website_payment/controllers/main.py b/addons/website_payment/controllers/main.py
index fc3441f0b5f..ed7c0ade11d 100644
--- a/addons/website_payment/controllers/main.py
+++ b/addons/website_payment/controllers/main.py
@@ -7,7 +7,7 @@ from odoo.http import request
 
 class WebsitePayment(http.Controller):
     @http.route(['/my/payment_method'], type='http', auth="user", website=True)
-    def payment_method(self):
+    def payment_method(self, **kwargs):
         acquirers = list(request.env['payment.acquirer'].search([('website_published', '=', True), ('registration_view_template_id', '!=', False)]))
         partner = request.env.user.partner_id
         payment_tokens = partner.payment_token_ids
@@ -16,8 +16,9 @@ class WebsitePayment(http.Controller):
             'pms': payment_tokens,
             'acquirers': acquirers
         }
+        return_url = request.params.get('redirect', '/my/payment_method')
         for acquirer in acquirers:
-            acquirer.form = acquirer.sudo()._registration_render(request.env.user.partner_id.id, {'error': {}, 'error_message': [], 'return_url': '/my/payment_method', 'json': False, 'bootstrap_formatting': True})
+            acquirer.form = acquirer.sudo()._registration_render(request.env.user.partner_id.id, {'error': {}, 'error_message': [], 'return_url': return_url, 'json': False, 'bootstrap_formatting': True})
         return request.render("website_payment.pay_methods", values)
 
     @http.route(['/website_payment/delete/'], methods=['POST'], type='http', auth="user", website=True)
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index c06ce9e4cdc..cc7249a056d 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -729,9 +729,10 @@ class WebsiteSale(http.Controller):
                     }
                 )
                 acquirer.button = acquirer_button
-                acquirer.tokens = request.env['payment.token'].search([('acquirer_id', '=', acquirer.id)])
                 values['acquirers'].append(acquirer)
 
+                values['tokens'] = request.env['payment.token'].search([('partner_id', '=', order.partner_id.id), ('acquirer_id', 'in', acquirers.ids)])
+
         return request.render("website_sale.payment", values)
 
     @http.route(['/shop/payment/transaction_token/confirm'], type='json', auth="public", website=True)
diff --git a/addons/website_sale/static/src/js/website_sale_payment.js b/addons/website_sale/static/src/js/website_sale_payment.js
index 5652ae3af76..d04dfc77774 100644
--- a/addons/website_sale/static/src/js/website_sale_payment.js
+++ b/addons/website_sale/static/src/js/website_sale_payment.js
@@ -13,20 +13,30 @@ $(document).ready(function () {
 
     // When choosing an acquirer, display its Pay Now button
     var $payment = $("#payment_method");
-    $payment.on("click", "input[name='acquirer'], button.btn_payment_token", function (ev) {
-            var payment_id = $(ev.currentTarget).val() || $(this).data('acquirer');
-            $("div.oe_sale_acquirer_button[data-id]", $payment).addClass("hidden");
-            $("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).removeClass("hidden");
-
-            // show token
-            $("div.list-group[data-acquirer!='"+payment_id+"']", $payment).hide();
-            $("div.list-group[data-acquirer='"+payment_id+"']", $payment).show();
+    $payment.on("click", "input[name='acquirer'], a.btn_payment_token", function (ev) {
+            var ico_off = 'fa-circle-o';
+            var ico_on = 'fa-dot-circle-o';
 
+            var payment_id = $(ev.currentTarget).val() || $(this).data('acquirer');
             var token = $(ev.currentTarget).data('token') || '';
+
             $("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).attr('data-token', token);
+            $("div.js_payment a.list-group-item").removeClass("list-group-item-info");
+            $('span.js_radio').switchClass(ico_on, ico_off, 0);
+            if (token) {
+              $("div.oe_sale_acquirer_button div.pre_msg").hide();
+              $(ev.currentTarget).find('span.js_radio').switchClass(ico_off, ico_on, 0);
+              $(ev.currentTarget).parents('li').find('input').prop("checked", true);
+              $(ev.currentTarget).addClass("list-group-item-info");
+            }
+            else{
+              $("div.oe_sale_acquirer_button div.pre_msg").show();
+            }
+            $("div.oe_sale_acquirer_button[data-id]", $payment).addClass("hidden");
+            $("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).removeClass("hidden");
 
-        })
-        .find("input[name='acquirer']:checked").click();
+    })
+    .find("input[name='acquirer']:checked").click();
 
     // When clicking on payment button: create the tx using json then continue to the acquirer
     $payment.on("click", 'button[type="submit"], button[name="submit"]', function (ev) {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 75e7190055b..7588a4a5789 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1323,35 +1323,45 @@
                             <h4>Payment Method:</h4>
                             <ul class="list-unstyled">
                                 <t t-foreach="acquirers or []" t-as="acquirer">
-                                    <li>
-                                        <label t-if="acquirer.button">
-                                            <input t-att-value="acquirer.id" type="radio" name="acquirer" t-att-checked="acquirers[0] == acquirer" />
-                                            <img class="media-object" style="width: 60px; display: inline-block;" t-att-title="acquirer.name" t-att-src="'/payment_%s/static/src/img/%s_icon.png' % (acquirer.provider, acquirer.provider)" />
-                                            <span t-field="acquirer.name" />
-                                            <span t-if="acquirer.fees_active">(extra fees apply)</span>
-                                        </label>
-                                    </li>
-
-
-                                    <div class="list-group" style='display:none;' t-if='acquirer.tokens' t-att-data-acquirer="acquirer.id">
-                                        <a href="#" class="list-group-item disabled btn_payment_token" t-att-data-acquirer="acquirer.id">
-                                            <span class="fa fa-cc-visa"/> <b>Registered Cards</b>
-                                        </a>
-                                        <t t-foreach='acquirer.tokens' t-as='token'>
-                                            <button type="button" class="list-group-item btn_payment_token" t-att-data-acquirer="acquirer.id" t-att-data-token='token.id'>
-                                                <span class="fa fa-credit-card"></span>&amp;nbsp;  <t t-esc="token.name" />
-                                            </button>
+                                  <li>
+                                    <label t-if="acquirer.button">
+                                        <input t-att-value="acquirer.id" type="radio" name="acquirer" t-att-checked="acquirers[0] == acquirer" />
+                                        <img class="media-object" style="width: 60px; display: inline-block;" t-att-title="acquirer.name" t-att-src="'/payment_%s/static/src/img/%s_icon.png' % (acquirer.provider, acquirer.provider)" />
+                                        <span t-field="acquirer.name" />
+                                        <span t-if="acquirer.fees_active">(processing fees apply)</span>
+                                    </label>
+                                  </li>
+                                </t>
+                                <li t-if="[acq for acq in acquirers if acq.registration_view_template_id]">
+                                    <label>
+                                        <input type="radio" name="acquirer" />
+                                        <span class='fa fa-2x fa-credit-card'/>
+                                        Saved Cards
+                                    </label>
+
+                                    <div class="list-group">
+                                        <t t-foreach='tokens' t-as='token'>
+                                            <a class="list-group-item btn_payment_token" t-att-data-acquirer="token.acquirer_id.id" t-att-data-token='token.id'>
+                                                <span class="js_radio fa fa-circle-o"></span>&amp;nbsp; 
+                                                <t t-esc="token.name" />
+                                                <t t-if="len(set(tokens.mapped('acquirer_id')))>1">
+                                                    (<t t-esc='token.acquirer_id.name'/>)
+                                                </t>
+                                                <span t-if="token.acquirer_id.fees_active">(processing fees apply)</span>
+                                            </a>
                                         </t>
+                                        <a href="/my/payment_method?redirect=/shop/payment" class="list-group-item" >
+                                            <span class="fa fa-plus-square"/> <b>New card</b>
+                                        </a>
                                     </div>
-
-                                </t>
+                                </li>
                             </ul>
                         </div>
                         <div class="col-lg-3 col-sm-3">
                             <t t-foreach="acquirers or []" t-as="acquirer" id="acquirers_list">
                                 <div t-att-data-id="acquirer.id" class="oe_sale_acquirer_button hidden pull-right">
                                     <div t-raw="acquirer.button" />
-                                    <div t-field="acquirer.pre_msg" />
+                                    <div class="pre_msg" t-field="acquirer.pre_msg" />
                                 </div>
                             </t>
                         </div>
@@ -1622,6 +1632,7 @@
                                     <t t-call="website_sale.total">
                                         <t t-set='website_sale_order' t-value='tx.sale_order_id'/>
                                     </t>
+                                    <i class='text-danger' t-if="tx.acquirer_id.fees_active">! Some processing fees will be applied</i>
                                 </div>
                                 <div class="oe_pay_token col-sm-8">
                                   <div class="panel panel-info">