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

website_sale_payment_terms/static/src/js/payment_terms.js

@@ -2,26 +2,56 @@ 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');
 
+    publicWidget.registry.websiteSalePaymentTerms = publicWidget.Widget.extend({
+        selector: '.oe_website_sale',
+        events: {
+            "click #payment_terms input[name='payment_term_id']": '_onPaymentTermClick',
+            "click #btn_accept_payment_terms": '_acceptPaymentTerms',
+            "click #btn_deny_payment_terms": '_denyPaymentTerms',
+        },
+
+        /**
+         * @override
+         */
+        start: function () {
+            core.bus.on('payment_terms_update_amount', this, this.updateAmountDue);
+            return this._super.apply(this, arguments).then(function () {
                 var available_term = $('input[name="payment_term_id"]').length;
+                var $payButton = $('#o_payment_form_pay');
                 if (available_term > 0) {
                     console.log('Payment term detected');
-        // Detect pay button and disable on page load - This isn't ideal but there is something I cant find that is preventing disabling this
-        setTimeout(function(){ $('#o_payment_form_pay').prop('disabled', true); }, 500);
+                    $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');
                 }
+            });
+        },
 
-    // Calculate amount Due Now
-    function calculate_deposit(t, d, f) {
+        //--------------------------------------------------------------------------
+        // Public
+        //--------------------------------------------------------------------------
+
+        /*
+         * 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);
@@ -31,40 +61,48 @@ odoo.define('website_sale_payment_terms.payment_terms', function (require) {
                 amount = 0.00;
                 return amount;
             }
-    }
+        },
 
-    // Payment input clicks update sale.order payment_term_id
-    var _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(ajax.jsonRpc('/shop/update_payment_term', 'call', values).then(_onPaymentTermUpdateAnswer));
-    };
-    var $payment_terms = $("#payment_terms input[name='payment_term_id']");
-    $payment_terms.click(_onPaymentTermClick);
-
-
-    // All input clicks update due amount
-    function updateAmountDue() {
-        var $amount_total = $('#order_total span.oe_currency_value').html().replace(',', '');
-        $amount_total = parseFloat($amount_total);
+        /*
+         * 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 = calculate_deposit($amount_total, $deposit_percentage, $deposit_flat);
+            var $due_amount = this.calculateDeposit(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();
         },
-    });
 
-    // Show amount due if operation is a success
-    var _onPaymentTermUpdateAnswer = function (result) {
+        //--------------------------------------------------------------------------
+        // 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
@@ -74,7 +112,7 @@ odoo.define('website_sale_payment_terms.payment_terms', function (require) {
                 }
 
                 // Change forms based on order payment requirement
-            updateAmountDue();
+                this.updateAmountDue();
                 if(!result.require_payment) {
                     $('#payment_method').hide();
                     $('#non_payment_method').show();
@@ -93,15 +131,32 @@ odoo.define('website_sale_payment_terms.payment_terms', function (require) {
                 console.error(result);
                 $('#payment_term_error_modal').modal();
             }
-    };
+        },
 
-});
+        /*
+         * @private
+         */
+        _acceptPaymentTerms: function () {
+            $('#o_payment_form_pay').prop('disabled', false);
+        },
 
-function deny_payment_terms() {
+        /*
+         * @private
+         */
+        _denyPaymentTerms: function () {
             $('#o_payment_form_pay').prop('disabled', true);
             window.location = '/shop/reject_term_agreement';
-}
+        },
+    });
 
-function accept_payment_terms() {
-    $('#o_payment_form_pay').prop('disabled', false);
-}
+
+    // update amount due after delivery options change
+    publicWidget.registry.websiteSaleDelivery.include({
+        _handleCarrierUpdateResult: function (result) {
+            this._super.apply(this, arguments);
+            core.bus.trigger('payment_terms_update_amount');
+        },
+    });
+
+    return publicWidget.registry.websiteSalePaymentTerms;
+});

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>