JavaScript Error on Plugins Page Due to Incorrect Constant Usage

When the Woo Checkout Field Editor Pro plugin is activated, a JavaScript error occurs on the plugins page wp-admin/plugins.php. The error message in the browser console is as follows:

Uncaught SyntaxError: Unexpected string (at plugins.php:5381:89)

This error is caused by the following line of code in the plugin:

reason_input += '<option value="' . esc_attr(HOUR_IN_SECONDS) . '">1 Hour</option>';

The issue arises because the HOUR_IN_SECONDS constant is not properly replaced with a numeric value when the HTML is generated by PHP. As a result, the client-side code fails due to a syntax error.

Path to the Problematic Code:

Plugin file: plugins\woo-checkout-field-editor-pro\includes\class-thwcfd.php

Code lines (387–392):

reason_input += '<label for="th-snooze">Snooze this panel while troubleshooting</label>';
reason_input += '<select name="th-snooze-time" class="th-snooze-select" disabled>';
reason_input += '<option value="' . esc_attr(HOUR_IN_SECONDS) . '">1 Hour</option>';
reason_input += '<option value="' . esc_attr(12 * HOUR_IN_SECONDS) . '">12 Hour</option>';
reason_input += '<option value="' . esc_attr(DAY_IN_SECONDS) . '">24 Hour</option>';
reason_input += '<option value="' . esc_attr(WEEK_IN_SECONDS) . '">1 Week</option>';

Cause of the Issue:

PHP constants like HOUR_IN_SECONDS are not interpolated correctly in JavaScript. These constants need to be evaluated on the server side and passed as specific numeric values.

Solution:

To resolve this issue, the code should be modified so that the PHP constants are passed into JavaScript as numbers. For example:

<script type="text/javascript">
    (function($){
        var popup = $("#thwcfd_deactivation_form");
        var deactivation_link = '';
        $('.thwcfd-deactivate-link').on('click', function(e){
            e.preventDefault();
            deactivation_link = $(this).attr('href');
            popup.css("display", "block");
            popup.find('a.thwcfd-deactivate').attr('href', deactivation_link);
        });

        popup.on('click', 'input[type="radio"]', function () {
            var parent = $(this).parents('li:first');
            popup.find('.reason-input').remove();

            var type = parent.data('type');
            var placeholder = parent.data('placeholder');

            var reason_input = '';
            if('text' == type){
                reason_input += '<div class="reason-input">';
                reason_input += '<input type="text" placeholder="'+ placeholder +'">';
                reason_input += '</div>';
            }else if('textarea' == type){
                reason_input += '<div class="reason-input">';
                reason_input += '<textarea row="5" placeholder="'+ placeholder +'">';
                reason_input += '</textarea>';
                reason_input += '</div>';
            }else if('checkbox' == type){
                reason_input += '<div class="reason-input ">';
                reason_input += '<input type="checkbox" id="th-snooze" name="th-snooze" class="th-snooze-checkbox">';
                reason_input += '<label for="th-snooze">Snooze this panel while troubleshooting</label>';
                reason_input += '<select name="th-snooze-time" class="th-snooze-select" disabled>';
                // PHP constants will be output here as actual values
                reason_input += '<option value="' + <?php echo HOUR_IN_SECONDS; ?> + '">1 Hour</option>';
                reason_input += '<option value="' + <?php echo 12 * HOUR_IN_SECONDS; ?> + '">12 Hour</option>';
                reason_input += '<option value="' + <?php echo DAY_IN_SECONDS; ?> + '">24 Hour</option>';
                reason_input += '<option value="' + <?php echo WEEK_IN_SECONDS; ?> + '">1 Week</option>';
                reason_input += '<option value="' + <?php echo MONTH_IN_SECONDS; ?> + '">1 Month</option>';
                reason_input += '</select>';
                reason_input += '</div>';
            }else if('reviewlink' == type){
                reason_input += '<div class="reason-input wcfe-review-link">';
                reason_input += '<input type="hidden" value="<?php esc_html_e('Upgraded', 'woo-checkout-field-editor-pro');?>">';
                reason_input += '</div>';
            }

            if(reason_input !== ''){
                parent.append($(reason_input));
            }
        });

        popup.on('click', '.thwcfd-close', function () {
            popup.css("display", "none");
        });

        popup.on('click', '.thwcfd-submit-deactivate', function (e) {
            e.preventDefault();
            var button = $(this);
            if (button.hasClass('disabled')) {
                return;
            }
            var radio = $('.deactivation-reason input[type="radio"]:checked');
            var parent_li = radio.parents('li:first');
            var parent_ul = radio.parents('ul:first');
            var input = parent_li.find('textarea, input[type="text"], input[type="hidden"]');
            var wcfe_deacive_nonce = parent_ul.data('nonce');

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'thwcfd_deactivation_reason',
                    reason: (0 === radio.length) ? 'none' : radio.val(),
                    comments: (0 !== input.length) ? input.val().trim() : '',
                    security: wcfe_deacive_nonce,
                },
                beforeSend: function () {
                    button.addClass('disabled');
                    button.text('Processing...');
                },
                complete: function () {
                    window.location.href = deactivation_link;
                }
            });
        });

        popup.on('click', '#th-snooze', function () {
            if($(this).is(':checked')){
                popup.find('.th-snooze-select').prop("disabled", false);
            }else{
                popup.find('.th-snooze-select').prop("disabled", true);
            }
        });

    }(jQuery))
</script>

The esc_attr(HOUR_IN_SECONDS) should be replaced with the actual numeric value of the constant, possibly by passing it through Ajax or another method of server-client interaction.

Recommendation for Plugin Developers:

1. Correct the handling of PHP constants in JavaScript by passing them as numbers.
2. Ensure that all values that need to be calculated on the server are passed to JavaScript correctly.