HelenaExpressApp/www/assets/js/noticeslip.js

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

var signaturePad = null;
var frontSlipImg = null;
var backSlipImg = null;
var stripeLoaded = false;

function initSignaturePad() {
    var canvas = document.getElementById("signaturecanvas");
    resizeCanvas(canvas);
    signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        onBegin: function () {
            // stop page from jumping around if user starts drawing signature while a text box is focused
            $("input").blur();
        }
    });
}

function resizeCanvas(canvas) {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    if (signaturePad != null) {
        signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    }
}


function initNoticeSlipForm() {
    initSignaturePad();
    $("#noticeform #name").attr("placeholder", ["John Doe", "Jane Doe", "Dave S. Nothereman", "Sara N. Ignatur"].random());
    $("#noticeform #zip").attr("placeholder", ["59601", "59602"].random());
    if (!stripeLoaded) {
        $.getScript("https://js.stripe.com/v3", function () {
            stripeLoaded = true;
        });
    }
}

function takeDocPhoto(side) {
    try {
        navigator.camera.getPicture(function (img) {
            if (side == "front") {
                frontSlipImg = "data:image/jpg;base64," + img;
                $("#noticefrontimg").attr("src", frontSlipImg);
            } else if (side == "back") {
                backSlipImg = "data:image/jpg;base64," + img;
                $("#noticebackimg").attr("src", backSlipImg);
            }
        }, function (err) {
            app.dialog.alert(err, "Error");
        }, {
            quality: 50,
            targetWidth: 1000,
            targetHeight: 2000,
            pictureSourceType: Camera.PictureSourceType.CAMERA,
            destinationType: Camera.DestinationType.DATA_URL,
            encodingType: Camera.EncodingType.JPEG,
            saveToPhotoAlbum: false,
            correctOrientation: true,
            cameraDirection: Camera.Direction.BACK
        });
//        cordova-plugin-document-scanner was removed because the plugin is buggy.
//        scan.scanDoc(function (img) {
//            if (side == "front") {
//                frontSlipImg = "data:image/jpg;base64," + img;
//                $("#noticefrontimg").attr("src", frontSlipImg);
//            } else if (side == "back") {
//                backSlipImg = "data:image/jpg;base64," + img;
//                $("#noticebackimg").attr("src", backSlipImg);
//            }
//        }, function (err) {
//
//        }, {
//            sourceType: 1,
//            quality: 3,
//            returnBase64: true
//        });
    } catch (ex) {
        app.dialog.alert("Looks like you can't do that with this device.", "Whoops!");
    }
}

function checkNoticeSlipForm() {
    // make sure everything's filled out
    if ($("#noticeform #name").val().length < 5) {
        return "Please type your name where provided.";
    }
    if ($("#noticeform #street").val().length < 5) {
        return "Please type your street address (i.e. 1234 Example Rd, Apt 5).";
    }
    if ($("#noticeform #zip").val().length < 5) {
        return "Please type your ZIP Code.";
    }

    if (signaturePad.isEmpty()) {
        return "Please sign with a finger or stylus in the box provided.";
    }

    if ($("#noticesignform #signature").val().length < 5) {
        return "Please type your full name below your signature.";
    }

    if (frontSlipImg == null) {
        return "Take a picture of the front side of your notice slip.";
    }
    if (backSlipImg == null) {
        return "Take a picture of the signed back side of your notice slip.";
    }

    return true;
}

function getPrice() {
    var precheckResult = checkNoticeSlipForm();
    if (precheckResult === true) {
        app.dialog.preloader("Loading...");
        apirequest(SETTINGS.apis.pickuprequest, {
            action: "rate",
            street: $("#noticeform #street").val(),
            zip: $("#noticeform #zip").val()
        }, function (resp) {
            app.dialog.close();
            if (resp.status == "OK") {
                // set display text so customer knows what they're paying
                $("#noticeslip-pay-amount").text(resp.rate);
                // initialize Stripe.js
                initStripe();
                // open payment popup
                app.popup.create({el: document.getElementById("noticeslip-pay-popup")}).open();
            } else if (resp.status == "ERROR") {
                app.dialog.alert(resp.message, "Error");
            } else {
                app.dialog.alert("There was a server problem. Try again later.", "Error");
            }
        }, function (xhr) {
            app.dialog.close();
            try {
                var error = $.parseJSON(xhr.responseText);
                if (error && typeof error.msg != 'undefined') {
                    app.dialog.alert(error.msg, "Error");
                } else {
                    app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
                }
            } catch (ex) {
                app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
            }
        }, "GET");
    } else if (typeof precheckResult == "string") {
        app.dialog.alert(precheckResult, "Whoops!");
    } else {
        app.dialog.alert("Check that the form is filled out correctly.", "Whoops!");
    }
}

function initStripe() {
    // Wait for Stripe to be loaded
    if (typeof Stripe == 'undefined') {
        setTimeout(initStripe, 500);
        return;
    }
    stripe = Stripe(SETTINGS["stripe_pubkey"]);
    elements = stripe.elements();

    card = elements.create('card', {});

    // stop console warning "This Element will be mounted to a DOM element that contains child nodes."
    $("#noticeslip-stripe-elements").html("");

    card.mount('#noticeslip-stripe-elements');

    card.addEventListener('change', function (event) {
        var displayError = document.getElementById('noticeslip-card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
}

function noticeSlipPayAndFinish() {
    getPrice();
}

function submitNoticeSlip() {
    app.dialog.preloader("Sending...");
    stripe.createPaymentMethod({type: 'card', card: card}).then(function (result) {
        if (result.error) {
            // Inform the customer that there was an error.
            app.dialog.close();
            var errorElement = document.getElementById('noticeslip-card-errors');
            errorElement.textContent = result.error.message;
        } else {
            apirequest(SETTINGS.apis.pickuprequest, {
                action: "submit",
                name: $("#noticeform #name").val(),
                street: $("#noticeform #street").val(),
                zip: $("#noticeform #zip").val(),
                phone: $("#noticeform #phone").val(),
                email: $("#noticeform #email").val(),
                front: frontSlipImg,
                back: backSlipImg,
                signature: signaturePad.toDataURL(),
                signatureName: $("#noticesignform #signature").val(),
                amount: $("#noticeslip-pay-amount").text(),
                stripeid: result.paymentMethod.id,
                phonenumber: getStorage("phonenumber")
            }, function (resp) {
                app.dialog.close();
                if (resp.status == "OK") {
                    app.popup.close();
                    router.navigate("/noticeslip/success");
                } else if (resp.status == "ERROR") {
                    app.dialog.alert(resp.message, "Error");
                } else {
                    app.dialog.alert("There was a server problem. Try again later.", "Error");
                }
            }, function (xhr) {
                app.dialog.close();
                app.popup.close();
                try {
                    var error = $.parseJSON(xhr.responseText);
                    if (error && typeof error.msg != 'undefined') {
                        app.dialog.alert(error.msg, "Error");
                    } else {
                        app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
                    }
                } catch (ex) {
                    app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
                }
            }, "POST");
        }
    });
}

$("#app").on("click", "#signatureClearBtn", function () {
    //signaturePad.clear();
    // clear the signature pad and fix it if it's wrong
    resizeCanvas(document.getElementById("signaturecanvas"));
});

$("#app").on("click", "#signatureUndoBtn", function () {
    var data = signaturePad.toData();

    if (data) {
        data.pop(); // remove the last dot or line
        signaturePad.fromData(data);
    }
});