[IMP] website_sale_payment_terms: refactor js into widget to facilitate inheritance

website_sale_payment_terms/static/src/js/payment_terms.js

@@ -2,106 +2,161 @@ odoo.define('website_sale_payment_terms.payment_terms', function (require) {
     "use strict";
 
     require('web.dom_ready');
-    var ajax = require('web.ajax');
     var concurrency = require('web.concurrency');
+    var core = require('web.core');
     var dp = new concurrency.DropPrevious();
     var publicWidget = require('web.public.widget');
     require('website_sale_delivery.checkout');
 
 
-    console.log('Payment Terms V10.1');
+    console.log('Payment Terms V10.2');
 
-    var available_term = $('input[name="payment_term_id"]').length;
+    publicWidget.registry.websiteSalePaymentTerms = publicWidget.Widget.extend({
-    if (available_term > 0) {
+        selector: '.oe_website_sale',
-        console.log('Payment term detected');
+        events: {
-        // Detect pay button and disable on page load - This isn't ideal but there is something I cant find that is preventing disabling this
+            "click #payment_terms input[name='payment_term_id']": '_onPaymentTermClick',
-        setTimeout(function(){ $('#o_payment_form_pay').prop('disabled', true); }, 500);
+            "click #btn_accept_payment_terms": '_acceptPaymentTerms',
-    } else {
+            "click #btn_deny_payment_terms": '_denyPaymentTerms',
-        console.log('no payment term detected');
+        },
-    }
 
-    // Calculate amount Due Now
+        /**
-    function calculate_deposit(t, d, f) {
+         * @override
-        var amount = t * d / 100 + f;
+         */
-        if (amount > 0) {
+        start: function () {
-            amount = amount.toFixed(2);
+            core.bus.on('payment_terms_update_amount', this, this.updateAmountDue);
-            amount = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            return this._super.apply(this, arguments).then(function () {
-            return amount;
+                var available_term = $('input[name="payment_term_id"]').length;
-        } else {
+                var $payButton = $('#o_payment_form_pay');
-            amount = 0.00;
+                if (available_term > 0) {
-            return amount;
+                    console.log('Payment term detected');
-        }
+                    $payButton.prop('disabled', true);
-    }
+                    var disabledReasons = $payButton.data('disabled_reasons') || {};
+                    disabledReasons.payment_terms_selection = true;
+                    $payButton.data('disabled_reasons', disabledReasons);
+                } else {
+                    console.log('no payment term detected');
+                }
+            });
+        },
 
-    // Payment input clicks update sale.order payment_term_id
+        //--------------------------------------------------------------------------
-    var _onPaymentTermClick = function (ev) {
+        // Public
-        $('#o_payment_form_pay').prop('disabled', true);
+        //--------------------------------------------------------------------------
-        var payment_term_id = $(ev.currentTarget).val();
-        var values = {'payment_term_id': payment_term_id};
-        dp.add(ajax.jsonRpc('/shop/update_payment_term', 'call', values).then(_onPaymentTermUpdateAnswer));
-    };
-    var $payment_terms = $("#payment_terms input[name='payment_term_id']");
-    $payment_terms.click(_onPaymentTermClick);
 
+        /*
+         * Calculate amount Due Now
+         *
+         * @public
+         * @param: {number} t Total
+         * @param: {number} d Deposit percentage
+         * @param: {number} f Deposit flat amount
+         */
+        calculateDeposit: function (t, d, f) {
+            var amount = t * d / 100 + f;
+            if (amount > 0) {
+                amount = amount.toFixed(2);
+                amount = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                return amount;
+            } else {
+                amount = 0.00;
+                return amount;
+            }
+        },
+
+        /*
+         * All input clicks update due amount
+         *
+         * @public
+         */
+        updateAmountDue: function () {
+            var amount_total = $('#order_total span.oe_currency_value').html().replace(',', '');
+            amount_total = parseFloat(amount_total);
+            var $checked = $('input[name="payment_term_id"]:checked');
+            var $deposit_percentage = $checked.attr('data-deposit-percentage');
+            var $deposit_flat = parseFloat($checked.attr('data-deposit-flat'));
+            var $due_amount = this.calculateDeposit(amount_total, $deposit_percentage, $deposit_flat);
+            $('#order_due_today span.oe_currency_value').html($due_amount);
+        },
+
+        //--------------------------------------------------------------------------
+        // Private
+        //--------------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {object} ev
+         */
+        _onPaymentTermClick: function (ev) {
+            $('#o_payment_form_pay').prop('disabled', true);
+            var payment_term_id = $(ev.currentTarget).val();
+            var values = {'payment_term_id': payment_term_id};
+            dp.add(this._rpc({
+                'route': '/shop/update_payment_term',
+                'params': values,
+            }).then(this._onPaymentTermUpdateAnswer.bind(this)));
+        },
+
+        /**
+         * Show amount due if operation is a success
+         *
+         * @private
+         * @param {Object} result
+         */
+        _onPaymentTermUpdateAnswer: function (result) {
+            if (!result.error) {
+
+                // Get Payment Term note/description for modal
+                var note = result.note;
+                if (!result.note) {
+                    note = result.payment_term_name;
+                }
+
+                // Change forms based on order payment requirement
+                this.updateAmountDue();
+                if(!result.require_payment) {
+                    $('#payment_method').hide();
+                    $('#non_payment_method').show();
+                    $('#order_due_today').hide();
+                } else {
+                    $('#payment_method').show();
+                    $('#non_payment_method').hide();
+                    $('#order_due_today').show();
+                }
+
+                // Open success modal with message
+                $('#payment_term_success_modal .success-modal-note').text(note);
+                $('#payment_term_success_modal').modal();
+            } else {
+                // Open error modal
+                console.error(result);
+                $('#payment_term_error_modal').modal();
+            }
+        },
+
+        /*
+         * @private
+         */
+        _acceptPaymentTerms: function () {
+            $('#o_payment_form_pay').prop('disabled', false);
+        },
+
+        /*
+         * @private
+         */
+        _denyPaymentTerms: function () {
+            $('#o_payment_form_pay').prop('disabled', true);
+            window.location = '/shop/reject_term_agreement';
+        },
+    });
 
-    // All input clicks update due amount
-    function updateAmountDue() {
-        var $amount_total = $('#order_total span.oe_currency_value').html().replace(',', '');
-        $amount_total = parseFloat($amount_total);
-        var $checked = $('input[name="payment_term_id"]:checked');
-        var $deposit_percentage = $checked.attr('data-deposit-percentage');
-        var $deposit_flat = parseFloat($checked.attr('data-deposit-flat'));
-        var $due_amount = calculate_deposit($amount_total, $deposit_percentage, $deposit_flat);
-        $('#order_due_today span.oe_currency_value').html($due_amount);
-    }
 
     // update amount due after delivery options change
     publicWidget.registry.websiteSaleDelivery.include({
         _handleCarrierUpdateResult: function (result) {
             this._super.apply(this, arguments);
-            updateAmountDue();
+            core.bus.trigger('payment_terms_update_amount');
         },
     });
 
-    // Show amount due if operation is a success
+    return publicWidget.registry.websiteSalePaymentTerms;
-    var _onPaymentTermUpdateAnswer = function (result) {
-        if (!result.error) {
-
-            // Get Payment Term note/description for modal
-            var note = result.note;
-            if (!result.note) {
-                note = result.payment_term_name;
-            }
-
-            // Change forms based on order payment requirement
-            updateAmountDue();
-            if(!result.require_payment) {
-                $('#payment_method').hide();
-                $('#non_payment_method').show();
-                $('#order_due_today').hide();
-            } else {
-                $('#payment_method').show();
-                $('#non_payment_method').hide();
-                $('#order_due_today').show();
-            }
-
-            // Open success modal with message
-            $('#payment_term_success_modal .success-modal-note').text(note);
-            $('#payment_term_success_modal').modal();
-        } else {
-            // Open error modal
-            console.error(result);
-            $('#payment_term_error_modal').modal();
-        }
-    };
-
 });
-
-function deny_payment_terms() {
-    $('#o_payment_form_pay').prop('disabled', true);
-    window.location = '/shop/reject_term_agreement';
-}
-
-function accept_payment_terms() {
-    $('#o_payment_form_pay').prop('disabled', false);
-}

website_sale_payment_terms/views/website_templates.xml

@@ -77,12 +77,12 @@
                     <div class="modal-footer">
                         <button type="button"
                                 class="btn btn-default"
-                                onclick="accept_payment_terms()"
+                                id="btn_accept_payment_terms"
                                 data-dismiss="modal">Accept
                         </button>
                         <button type="button"
                                 class="btn btn-default"
-                                onclick="deny_payment_terms()">Deny
+                                id="btn_deny_payment_terms">Deny
                         </button>
                     </div>
                 </div>