chocolatdemariage/www/modules/tntofficiel/views/js/address-city-check.js

/**
 * TNT OFFICIAL MODULE FOR PRESTASHOP
 *
 * @author    GFI Informatique <www.gfi.fr>
 * @copyright 2016 GFI Informatique, 2016 TNT
 * @license   https://opensource.org/licenses/MIT MIT License
 */

$(document).ready(function () {

    // Remove the data-validate attribute from the city and postcode fields.
    $("#postcode").removeAttr("data-validate");
    $("#city").removeAttr("data-validate");
    $("#postcode").removeClass("validate");
    $("#city").removeClass("validate");

    // Create the FancyBox.
    createFancyBox();

    // When a city is selected.
    $("#validateCity").on('click', function () {
        // Actions to perform when a city is selected in the fancybox.
        // put the value in the city field
        $("#city").val($("#helper_city").val());
        // add the form-ok class to the city and postcode field
        $("#city").parent().removeClass('form-error').addClass('form-ok');
        $("#postcode").parent().removeClass('form-error').addClass('form-ok');
        // close the fancybox
        $.fancybox.close();
        // enable the save button
        $("#submitAddress").removeClass("disabled");
    });

    $("#add_address").on('submit', function (objEvent) {
        var strPostalCode = $("#postcode").val();
        var boolIsPostalCodeCityValid = false;

        // Do not perform a check if the postcode or the city is not entered
        if (strPostalCode.length < 1) {
            return null;
        }

        // call the middleware to check if the city match the CP.
        var objJqXHR = $.ajax({
            "url": window.TNTOfficiel.link.front.module.checkAddressPostcodeCity,
            "method": 'POST',
            "data": {
                "postcode": strPostalCode,
                "city": $("#city").val(),
                "countryId": $("#id_country").val()
            },
            "async": false
        });

        objJqXHR
        .done(function (mxdData, strTextStatus, objJqXHR) {
            // handle the response from the ajax request.
            var response = JSON.parse(mxdData);
            //if the city match the postcode
            //resultCode are defined in TntAddressModuleFrontController
            switch (response.resultCode) {
                // postcode/city is not valid.
                case 0:
                    $("#city").parent().removeClass('form-ok').addClass('form-error');
                    //display the fancybox
                    displayFancyBox(response.cities, strPostalCode);
                    break;
                // postcode/city is valid.
                case 1:
                    $("#city").parent().removeClass('form-error').addClass('form-ok');
                    $("#postcode").parent().removeClass('form-error').addClass('form-ok');
                    boolIsPostalCodeCityValid = true;
                    break;
                // postcode/city does not require validation.
                default:
                    boolIsPostalCodeCityValid = true;
            }
        })
        .fail(function (objJqXHR, strTextStatus, strErrorThrown) {
            // console.error( objJqXHR.status + ' ' + objJqXHR.statusText );
        })
        .always(function () {
            // if postal code and city is not correct.
            if (!boolIsPostalCodeCityValid) {
                objEvent.preventDefault();
            }
        });
    });
});


/**
 * insert the fancy box html into the page
 */
function createFancyBox() {
    $("#page").append('\
<a id="fancybox_city_helper" href="#city_helper" hidden="hidden"></a>\
<div style="display:none">\
    <div id="city_helper">\
        <h1 class="page-subheading">S&eacute;lectionnez votre ville</h1>\
        <div class="form-group">\
            <label for="postcode">Code postal</label>\
            <input class="form-control" type="text" id="helper_postcode" name="helper_postcode" value="" disabled="disabled" />\
        </div>\
        <div class="form-group">\
            <label for="helper_city">Ville</label>\
            <select id="helper_city" name="helper_city"></select>\
        </div>\
        <p class="submit2">\
            <button id="validateCity" class="btn btn-default button button-small">\
                <span>Valider<i class="icon-chevron-right right"></i></span>\
            </button>\
        </p>\
    </div>\
</div>'
    );
}

/**
 * Display the fancybox
 */
function displayFancyBox(arrArgCities, strArgPostCode) {
    // fancybox configuration
    $("a#fancybox_city_helper").fancybox({
        "transitionIn": 'elastic',
        "transitionOut": 'elastic',
        "type": 'inline',
        "speedIn": 600,
        "speedOut": 200,
        "overlayShow": false,
        "autoDimensions": true,
        "helpers": {
            overlay: {closeClick: false}
        }
    });

    // Generate the options to be put in the city select field.
    var strHTMLOptions = "";
    $.each(arrArgCities, function (index, city) {
        strHTMLOptions += "<option value='" + city + "'>" + city + "</option>";
    });

    $("#helper_city").html(strHTMLOptions);
    $("#helper_city").addClass("form-control");
    $("#helper_postcode").val(strArgPostCode);
    $("a#fancybox_city_helper").trigger("click");
}