From 9f0b5a7c5336d8caee319bcedeaddf30f9c0e235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Wed, 4 Dec 2013 14:06:28 +0100
Subject: [PATCH] [IMP] website_sale: improved the choice of acquirer. Now all
 acquirer are displayed using a small icon; a Pay Now button is located on the
 right that is the next step for the payment. All acquirers are rendered with
 a Pay Now button, but only the currently chosen one is displayed. This allows
 to display several acquirers without having to do javascript-based hacks to
 tune the form, its action or content.

bzr revid: tde@openerp.com-20131204130628-eeqpfhoqaavhv6nk
---
 addons/website_sale/controllers/main.py       | 20 ++++++++++---------
 .../static/src/js/website_sale.js             |  7 -------
 .../static/src/js/website_sale_payment.js     | 17 +++++++---------
 addons/website_sale/views/website_sale.xml    | 18 +++++++++--------
 4 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index f160a25cfe1..8de4712c579 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -580,21 +580,23 @@ class Ecommerce(http.Controller):
 
         # fetch all registered payment means
         if tx:
-            payment_ids = [tx.acquirer_id.id]
+            acquirer_ids = [tx.acquirer_id.id]
         else:
-            payment_ids = payment_obj.search(cr, SUPERUSER_ID, [('portal_published', '=', True)], context=context)
-        values['payments'] = payment_obj.browse(cr, uid, payment_ids, context=context)
-        for pay in values['payments']:
-            pay._content = payment_obj.render(
-                cr, uid, pay.id,
+            acquirer_ids = payment_obj.search(cr, SUPERUSER_ID, [('portal_published', '=', True)], context=context)
+        values['acquirers'] = payment_obj.browse(cr, uid, acquirer_ids, context=context)
+        render_ctx = dict(context, submit_class='btn btn-primary', submit_txt='Pay Now')
+        for acquirer in values['acquirers']:
+            render_ctx['tx_url'] = '/shop/payment/transaction/%s' % acquirer.id
+            acquirer.button = payment_obj.render(
+                cr, uid, acquirer.id,
                 order.name,
                 order.amount_total,
-                order.pricelist_id.currency_id,
+                order.pricelist_id.currency_id.id,
                 partner_id=shipping_partner_id,
-                tx_custom_values={
+                tx_values={
                     'return_url': '/shop/payment/validate',
                 },
-                context=context)
+                context=render_ctx)
 
         return request.website.render("website_sale.payment", values)
 
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 856c8bd1aa6..46a360c5761 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -7,13 +7,6 @@ $(document).ready(function () {
         $(".oe_website_sale .js_shipping").toggle();
     });
 
-    var $payment = $(".oe_website_sale .js_payment");
-    $payment.find("input[name='payment_type']").click(function (ev) {
-        var payment_id = $(ev.currentTarget).val();
-        $("div[data-id]", $payment).addClass("hidden");
-        $("a.btn:last, div[data-id='"+payment_id+"']", $payment).removeClass("hidden");
-    });
-
     // change for css
     $(document).on('mouseup', '.js_publish', function (ev) {
         $(ev.currentTarget).parents(".thumbnail").toggleClass("disabled");
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 3da753c03f9..2821f6380a1 100644
--- a/addons/website_sale/static/src/js/website_sale_payment.js
+++ b/addons/website_sale/static/src/js/website_sale_payment.js
@@ -1,14 +1,11 @@
 $(document).ready(function () {
 
-    /* Hitting the payment button: payment transaction process begins
-     * We redirect the user to a custom shop page in oder to create the
-     * transaction. The form POST data will be used to perform the post
-     * query.
-     */
-    $('input#payment_submit').on('click', function (ev) {  // TDEFIXME: change input#ID to input inside payment form, less strict
-        var acquirer_id = $(this).closest('form').closest('div.oe_payment_acquirer').data().id || 0;
-        var form_action = $(this).closest("form").attr('action');
-        console.log('cliking on submit for payment - redirecting from', form_action, 'to shop with acqurier_id', acquirer_id);
-        $(this).closest("form").attr("action", '/shop/payment/transaction/' + acquirer_id);
+    // When choosing an acquirer, display its Pay Now button
+    var $payment = $("#payment_method");
+    $payment.find("input[name='acquirer']").click(function (ev) {
+        var payment_id = $(ev.currentTarget).val();
+        $("div.oe_sale_acquirer_button[data-id]", $payment).addClass("hidden");
+        $("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).removeClass("hidden");
     });
+
 });
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 32d43f2dafa..8b6e91c9720 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -878,20 +878,22 @@
                   </div>
                 </div>
 
-                <div class="js_payment mb64" t-if="not payment_acquirer_id and payments" id="payment_method">
+                <div class="js_payment mb64" t-if="acquirers" id="payment_method">
                     <h3>Choose your payment method</h3>
                     <div class="col-lg-5 col-sm-6">
-                        <t t-foreach="payments or []" t-as="payment">
-                            <label t-if="payment._content">
-                                <input t-att-value="payment.id" type="radio" name="payment_type"/> <span t-field="payment.name"/>
+                        <t t-foreach="acquirers or []" t-as="acquirer">
+                            <label t-if="acquirer.button" class="oe_sale_acquirer_logo" style="display: block;">
+                                <input t-att-value="acquirer.id" type="radio" name="acquirer"/>
+                                <img class="media-object" style="width: 60px; display: inline-block;"
+                                    t-att-title="acquirer.name"
+                                    t-att-src="'/payment_acquirer_%s/static/src/img/%s_icon.png' % (acquirer.name, acquirer.name)"/>
                             </label>
                         </t>
-                        <t t-foreach="payments" t-as="payment">
-                            <div t-att-data-id="payment.id" t-raw="payment._content" class="oe_payment_acquirer hidden"/>
-                        </t>
                     </div>
                     <div class="col-lg-3 col-sm-3">
-                        <button class="btn btn-primary pull-right">Pay Now !!!</button>
+                        <t t-foreach="acquirers or []" t-as="acquirer">
+                            <div t-att-data-id="acquirer.id" t-raw="acquirer.button" class="oe_sale_acquirer_button hidden"/>
+                        </t>
                     </div>
                 </div>