tilda-custom-payment-non-profits.html

<style>
    .ngkc_custom-donation-activ,
    .ngkc_standard_dontation_active {
        background-color: #6b2217 !important;
        color: #f8edda !important;
        background-image: none !important;
        font-weight: 550 !important;
    }
</style>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<script type="text/javascript">
    /* Zero block склеивает все строчки в одну! Поэтому обязательно 
       использовать ТОЛЬКО блочные комменты и ставить ; везде. */

    /* CSS (JQuery) селекторы для основных элементов формы: */
    const ngkcFormsSel = '.ngkc_no-enter-send';
    const isMonthlyCheckboxSel = 'input[name="ngkc_is-donation-monthly"]';
    const submitDonationBtnSel = '.ngkc_submit-donation';
    const donatorEmailSel = 'input[name="ngkc_donator_email"]';
    const donationAmtStandardSel = '.ngkc_donation-button-standard';
    const donationAmtCustomSel = 'input[name="ngkc_donation-button-custom"]';

    const errorMessageSel = '.ngkc_error-message'

    /* CSS классов активных состояний для кнопок пожертвований  */
    const donationStdActiveCls = 'ngkc_standard_dontation_active';
    const donationCustActiveForegroundCls = 'ngkc_custom-donation-activ'; // .. rename

    const disasterErrorMessage = "Что то пошло не так, попробуйте обновить страницу или " + 
        "<a href='https://crisis-center.ru/contact'>напишите нам напрямую</a>.";

    function deleteDefaultSubmitButtons() {
        const submitBtns = $(ngkcFormsSel).find(':submit');
        console.log("Removing Submit buttons ", submitBtns);
        submitBtns.hide();
        submitBtns.remove();
        submitBtns.parent().remove();
    }

    // .. change forms to horizontal
    // Удостоверимся, что ненужные кнопки форм убираются при повоте экрана
    window.onresize = function () {
        setTimeout(function () {
            deleteDefaultSubmitButtons();
        }, 1500); // эмперически подобранное значение, если меньше то не удаляется
    };

    const main = function () {
        console.log("Running MAIN");
        deleteDefaultSubmitButtons();

        function isMonthlyEl() { return $(isMonthlyCheckboxSel); };
        function donatorEmailEl() { return $(donatorEmailSel); };
        /* Поля для ввода суммы пожертвования */
        function donationAmtStandards() { return $(donationAmtStandardSel); };
        function donationStandardActive() { return $('.' + donationStdActiveCls); };
        function donationCustomActive() { return $('.' + donationCustActiveForegroundCls); };


        function errorMsgBox() { return $(errorMessageSel); };

        function deactivateStdButtons() {
            /* Для надёжности убираем активный класс у кнопок и их детей */
            const stdAndChildren = donationAmtStandards().toArray().flatMap(function (el) {
                const elAndChildren = Array.from(el.children);
                elAndChildren.unshift(el);
                return elAndChildren;
            });
            stdAndChildren.forEach(function (el, i) {
                el.classList.remove(donationStdActiveCls);
            });
        }

        function deactivateCustButton() {
            $(donationAmtCustomSel).removeClass(donationCustActiveForegroundCls);
        }


        function hideAllErrors() {
            errorMsgBox().hide();
        }
        hideAllErrors();

        donationAmtStandards().on('click', function (e) {
            /* Убираем все активные классы с кнопок сумм */
            deactivateCustButton();
            deactivateStdButtons();
            /* Добавляем класс active к нажатой кноке */
            e.target.classList.add(donationStdActiveCls);
        });

        // .. ngkcFormsSel - no send on enter

        /* Кнопка "Другая сумма" */
        $(ngkcFormsSel).on('click', donationAmtCustomSel, function (e) {
            /* Убираем все активные классы с кнопок сумм */
            deactivateStdButtons();
            deactivateCustButton();
            e.target.classList.add(donationCustActiveForegroundCls);
        });


        // .. rm
        function reportErrorInTextBox(errorMsg) {
            if (errorMsgBox().length) {
                errorMsgBox().show();
                errorMsgBox().children(":first").text(errorMsg);
            } else {
                alert(errorMsg);
            }
        }

        function reportError(htmlElement, errorMsg, allowHTML) {
            const isHtml = allowHTML === true;
            const tippyEl = tippy(htmlElement);
            tippyEl.setProps({content: errorMsg, trigger: 'click', interactive: isHtml, allowHTML: isHtml});
            tippyEl.show();
        }


        $(submitDonationBtnSel).click(function (e) {
            hideAllErrors();

            if (!isMonthlyEl().length) {
                console.log("Cannot find isMonthlyCheckbox using selecor ", isMonthlyCheckboxSel);
                reportError(this, disasterErrorMessage, true);
                return;
            }
            const isMonthly = isMonthlyEl().prop('checked');

            var donatorEmail = null;
            if (!donatorEmailEl().length) {
                console.log("Cannot find donatorEmailEl using selecor ", donatorEmailSel);
                reportError(this, disasterErrorMessage, true);
                return;
            }
            const emailtHtmlEl = donatorEmailEl().get(0);
            emailtHtmlEl.type = 'email';
            emailtHtmlEl.autocomplete = 'on';
            if (isMonthly) {
                emailtHtmlEl.required = true;
            } else {
                emailtHtmlEl.required = false;
            }
            if (emailtHtmlEl.form.reportValidity()) {
                donatorEmail = donatorEmailEl().val();
            } else if (donatorEmailEl().val() === '') {
                // .. tippy js
                // setTimeout(function(){ $('p').tooltip('hide'); }, 3000);
                reportErrorInTextBox("Email необходим для ежемесячных пожертвований");
            }

            var donationAmount = null;

            if (donationCustomActive().length > 1 || donationStandardActive().length > 1) {
                console.log("Something went seriously wrong: ", donationCustomActive(), donationStandardActive());
                reportErrorInTextBox("Что то пошло не так, попробуйте обновить страницу или напишите нам напрямую");
                return;
            } else if (donationCustomActive().length === 1) {
                const donCustHtmlEl = donationCustomActive().get(0);
                donCustHtmlEl.type = 'number';
                donCustHtmlEl.required = true;
                if (donCustHtmlEl.form.reportValidity()) {
                    donationAmount = donationCustomActive().val();
                } else {
                    return;
                }
                console.log("CUSTOOOOM: ", donationAmount);
            } else if (donationStandardActive().length === 1) {
                donationAmount = donationStandardActive()[0].innerText;
                console.log("STANDAAART ", donationAmount);
            } else {
                reportErrorInTextBox("Пожалуйста выберите сумму пожертвования ↑");
            }


            console.log("isMonthly: ", isMonthly);

            console.log("donationAmount: ", parseInt(donationAmount));

            console.log("donatorEmail: ", donatorEmail);

            const donationAmountInt = parseInt(donationAmount);
            if (donationAmountInt && (donatorEmail || !isMonthly)) {
                const onFailure = function(reason, options) {
                    console.log("Donation failed: ", options, donationAmountInt, isMonthly, email);
                    reportErrorInTextBox("Что то пошло не так: " + reason);
                }
                const onSuccess = function(options) {
                    console.log("Successfully sent donation: ", options, donationAmountInt, isMonthly, email);
                    $(this).html('Спасибо за пожертвование!');
                }
                window.sendCPDonationRequest(donationAmountInt, isMonthly, donatorEmail, onSuccess, onFailure);
            } else {
                console.log("Cannot send DONATION ", !!isMonthly, !!donationAmount, !!donatorEmail);
            }
        });

        console.log("EEEND");

    };

    window.onload = function () {
        setTimeout(function () {
            main();
        }, 100);
    };
</script>