Customer satisfaction survey and checkbox to not ask him/her again

Question

I am implementing a customer satisfaction module with use Sweet Alert 2.

Almost everything is working, the only pending activity is to control when the client decide to not see the satisfaction survey screen again.

The idea is to use a checkbox with the message "Do not ask me again." and the confirm button or the same checkbox and dismiss button.

In the same customer action, I will show the messages and update a database column table as a flag 1 or 0.

The code developed until now is the following:

swal({
    title: 'Survey',
    html: 'Would you like to answer a customer survey?',
    type: 'question',
    showCancelButton: true,
    cancelButtonText: 'No',
    confirmButtonText: 'Yes',
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: true,
    input: 'checkbox',
    inputPlaceholder: 'Do not ask me again'

}).then(function(inputValue) {

    win = window.open(win, '_blank');

    if (win) {

        //Browser has allowed it to be opened
        win.focus();

        swal({
            html: 'The company thanks you for your participation',
            type: 'success'
        });

        // if the customer checked to not see the survey requisition again call a function that update the database (1 for ask again and 0 to not)
        if (inputValue) {
            customerSurvey(customerId, 0);
        }

    } else {

        swal({
            title: 'Atention!',
            html: 'Please, allow your browser to display popups window.',
            type: 'warning'
        });

    }

}, function (dismiss) {

    swal({
        //title: 'Information!',
        html: 'Thank you for your attention.',
        type: 'info'
    });

});

As you can see, it works as I desire just when the customer click on checkbox and the button "Yes", when the first function has the inputValue as parameter. But, how do we deal with the second function on dismiss?

Answer 1

You can use global variables and listen for when the checkbox changes and assign the global variable. Which can be then used in your dismissed function.

var checkboxVal = false;
swal({
    title: 'Survey',
    html: 'Would you like to answer a customer survey?',
    type: 'question',
    showCancelButton: true,
    cancelButtonText: 'No',
    confirmButtonText: 'Yes',
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: true,
    input: 'checkbox',
    inputPlaceholder: 'Do not ask me again'
}).then(function (inputValue) {

    win = window.open(win, '_blank');

    if (win) {

        //Browser has allowed it to be opened
        win.focus();

        swal({
            html: 'The company thanks you for your participation',
            type: 'success'
        });

        // if the customer checked to not see the survey requisition again call a function that update the database (1 for ask again and 0 to not)
        if (inputValue) {
            customerSurvey(customerId, 0);
        }
    } else {
        swal({
            title: 'Atention!',
            html: 'Please, allow your browser to display popups window.',
            type: 'warning'
        });
    }
}, function (dismiss) {
    if (checkboxVal) {
        console.log("user has checked they do not want to view this popup again.");
        //handle your database call here
    }

    swal({
        //title: 'Information!',
        html: 'Thank you for your attention.',
        type: 'info'
    });
});

  /*
   *The following code handles when the checkbox has changed
   */
$('#swal2-checkbox').change(
    function () {
        if ($(this).is(':checked')) {
            checkboxVal = true;
        } else {
            checkboxVal = true;
        }
    });

Here is a working jSfiddle.

I hope this helps, Good luck!