Disabling the data-action of a button and display message based on specific functions performed for it.

We can disable a button data-action inorder to prevent it’s basic functionality untile a specific conditoin becomes true for it and also we can add extra functions like to display any error message.

_.extend(OrderWizardModulePaymentMethodSelector.prototype, {

                    selectPaymentMethod: function(e) {

                        let continueButton = $('#payment_method_continue_button');

                        let orderSummaryStepButtonContinue = $(".order-summary-step-button-continue");

                        let selectedPaymentTerms = this.selectedModule.instance.terms ? this.selectedModule.instance.terms.name : '';

                        const value = e.target.getAttribute('value') || jQuery(e.target).val();

                        if (value == "invoice" && selectedPaymentTerms == "Prepayment") {

                            _.defer(function () {

                                $('.order-summary-step-button-continue').prop("disabled", true);

                            });

                        }

                        else {

                            continueButton.prop('disabled', false);

                            orderSummaryStepButtonContinue.prop('disabled', false);

                        }

                        if (value) {

                            this.setModuleByType(value);

                        }

                    },

               

                    getContext: _.wrap(OrderWizardModulePaymentMethodSelector.prototype.getContext, function (fn) {

                        let original_Ret = fn.apply(this, _.toArray(arguments).slice(1));

                        try {

                            let paymentOptionType = this.selectedModule.type;

                            let selectedPaymentTerms = this.selectedModule.instance.terms ? this.selectedModule.instance.terms.name : '';

                            var global_view_summary_message = '<span class="global-views-summary-message global-views-message-error alert">To enable this button please click on the below continue button and select the applicable options on this page.</span>';

                            var errorMessageElement = $(global_view_summary_message);

                        // if the selected payment method is invoice or prepayment them continue button will enable or iwill be disabled//

                            if (paymentOptionType == "invoice" && selectedPaymentTerms == "Prepayment") {

                                _.defer(function () {

                                    $('.global-views-summary-message').remove();

                                    $('.order-summary-step-button-continue').prop("disabled", true);

                                    var global_view_message = '<span class="global-views-message global-views-message-error alert">Please select any payment method other than invoice</span>'

                                    $(global_view_message).insertAfter('[data-action="select-payment-method"]');

                                    errorMessageElement.insertAfter('.order-summary-step-button-continue');

                                });

                            }

                            else {

                                _.defer(function () {

                                    $('.global-views-summary-message').remove();

                                });

                            }

                        }

                        catch (e) {

                            console.log("show error", e);

                        }

                        original_Ret.PaymentVariable = this.wizard.selectedPayment;

                        return original_Ret;

                    })

                });