WebBuild/wwwroot/platform/controls/phonenumber/phonenumber.component.js

var Unibase;
(function (Unibase) {
    let Forms;
    (function (Forms) {
        let Controls;
        (function (Controls) {
            class PhoneNumber {
                init(formpropertyid, prop, callback) {
                    this.docpropertyname = prop.DocPropertyName;
                    var instance = PhoneNumber.Instance();
                    var container = "control-container-" + formpropertyid;
                    instance.loadControlSettings(prop.ControlJsonText, prop.FormPropertyId);
                    instance.loadPropertySettings(prop.PropertySettings, prop.FormPropertyId);
                    this.formname = prop.DocPropertyName;
                    var formid = $("#txtPhn_" + prop.DocPropertyName).parents('.formValidate').attr('id');
                    var errormsg = $("#" + formid).find('.bizgaze_FormErrorMessages').attr('id');
                    $(".creditnumber").keypress(function (e) {
                        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                            return false;
                        }
                    });
                    $(".dropdown_phonetype").change(function () {
                        var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        var phonetype = $(".dropdown_phonetype").val();
                        if (phonetype === "2") {
                            if ($("#a_Verify_phonenumber").hasClass("otp_verified")) {
                                $("#a_Verify_phonenumber").removeClass("otp_verified");
                                $("#a_Verify_phonenumber").text('');
                                $("#a_Verify_phonenumber").removeAttr("style");
                            }
                        }
                    });
                    $("#a_Verify_" + prop.DocPropertyName).click(function () {
                        if ($("#a_Verify_" + prop.DocPropertyName).hasClass("otp_verified") == false) {
                            var attribute = $(this);
                            var ContactNumber = $("#txtPhn_" + prop.DocPropertyName).val().toString();
                            if (ContactNumber == "" || ContactNumber == undefined) {
                                MessageHelper.Instance().showError("Please Enter Mobile Number for Verification", "" + errormsg);
                                return false;
                            }
                            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('platform/controls/phonenumber/managers/phonenumbermanager.js', function () {
                                Unibase.Platform.Controls.Phonenumber.Managers.PhonenumberManager.Instance().getVerified(ContactNumber).then(function (response) {
                                    if (response.errors != null) {
                                        MessageHelper.Instance().showError("Mobile Number Is Already Exist", "" + errormsg);
                                        return false;
                                    }
                                    else {
                                        if (ContactNumber.length > 9) {
                                            $("#a_Verify_" + prop.DocPropertyName).text('Re-send').css('color', 'green');
                                            Unibase.Forms.Controls.PhoneNumber.Instance().SendOtp(ContactNumber, prop.DocPropertyName);
                                            $(".div_Otp_" + prop.DocPropertyName).removeClass("hidden");
                                            $("#btn_submit_" + prop.DocPropertyName).addClass("hidden");
                                            $("#txtOtp_" + prop.DocPropertyName).val('');
                                            $("#txtOtp_" + prop.DocPropertyName).addClass("required");
                                        }
                                        else {
                                            MessageHelper.Instance().showError("Mobile Number should be 10 digits", "" + errormsg);
                                        }
                                    }
                                });
                            });
                        }
                    });
                    $("#txtPhn_" + prop.DocPropertyName).keyup(function () {
                        $("#a_Verify_" + prop.DocPropertyName).text('Verify').css('color', 'green');
                        $("#txtOtp_" + prop.DocPropertyName).val('');
                        $("#txtOtp_" + prop.DocPropertyName).removeClass("required");
                        $(".div_Otp_" + prop.DocPropertyName).addClass("hidden");
                        $("#txtOtp_" + prop.DocPropertyName).removeClass("required");
                    });
                    $("#txtPhn_" + prop.DocPropertyName).on("input", function () {
                        const inputVal = $(this).val();
                        $(this).val(inputVal.replace(/\D/g, ''));
                    });
                    $("#txtOtp_" + prop.DocPropertyName).removeClass('required');
                    $("#btn_submit_" + prop.DocPropertyName).click(function () {
                        var Otp = $("#txtOtp_" + prop.DocPropertyName).val().toString();
                        if (Otp.length == 6) {
                            Unibase.Forms.Controls.PhoneNumber.Instance().SubmitOTP(prop.DocPropertyName);
                        }
                        else {
                            MessageHelper.Instance().showError("Please Enter Valid OTP", "" + errormsg);
                            $("#txtOtp_" + prop.DocPropertyName).addClass('form-group-required');
                        }
                    });
                    $("#txtOtp_" + prop.DocPropertyName).attr('maxlength', '6');
                    $("#txtOtp_" + prop.DocPropertyName).keypress(function (e) {
                        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                            MessageHelper.Instance().showError("Numbers Only Allowed", '' + errormsg);
                            return false;
                        }
                        else {
                            if ($("#txtOtp_" + prop.DocPropertyName).val().toString().length >= 5) {
                                $("#btn_submit_" + prop.DocPropertyName).removeClass('hidden');
                            }
                            else {
                                $("#btn_submit_" + prop.DocPropertyName).addClass('hidden');
                            }
                        }
                    });
                    $("input#txtOtp_" + prop.DocPropertyName).unbind("keypress change input paste").bind("keypress change input paste", function () {
                        var value = $("#txtOtp_" + prop.DocPropertyName).val().toString();
                        if (value != "") {
                            var IsNumeric = $.isNumeric(value);
                            if (IsNumeric && value.length >= 5) {
                                $("#btn_submit_" + prop.DocPropertyName).removeClass('hidden');
                            }
                            else if (IsNumeric == false) {
                                $("#btn_submit_" + prop.DocPropertyName).addClass('hidden');
                                $("#txtOtp_" + prop.DocPropertyName).val("");
                                MessageHelper.Instance().showError("Numbers Only Allowed", '' + errormsg);
                                return false;
                            }
                            else {
                                $("#btn_submit_" + prop.DocPropertyName).addClass('hidden');
                            }
                        }
                        else if (value == "") {
                            $("#btn_submit_" + prop.DocPropertyName).addClass('hidden');
                        }
                    });
                    var el = document.getElementById('txtOtp_' + prop.DocPropertyName);
                    el.addEventListener('keydown', function (event) {
                        const key = event.key;
                        if (key === "Backspace" || key === "Delete") {
                            $("#btn_submit_" + prop.DocPropertyName).addClass('hidden');
                        }
                    });
                    if (callback != null)
                        callback();
                }
                loadControl(containerid, prop) {
                    let ControlId = 'txt_' + prop.UniqueId;
                    var regExpr = "";
                    var ErrMsg = "";
                    var validationlist = prop.Validations;
                    if (validationlist != null) {
                        for (var i = 0; i < validationlist.length; i++) {
                            regExpr += validationlist[i].RegularExp + '||';
                            ErrMsg += validationlist[i].ErrorMessage + '||';
                        }
                    }
                    var Isrequired = prop.IsRequired != true ? 'hidden' : '';
                    var required = prop.IsRequired != true ? '' : 'required';
                    var reqMark = prop.IsRequired != true ? '' : '*';
                    var CurrentStageId = $("#hf_" + $("#hfLayout_InstalledPageId").val() + "_StageId").val();
                    if (prop.StagesForRequired != null) {
                        var StagesForRequired = prop.StagesForRequired.split('|');
                        Isrequired = StagesForRequired.find(x => x == CurrentStageId) ? '' : 'hidden';
                        required = StagesForRequired.find(x => x == CurrentStageId) ? 'required' : '';
                        reqMark = StagesForRequired.find(x => x == CurrentStageId) ? '*' : '';
                    }
                    const { helpTooltipHtml, helpTextHtml, helpClass } = Unibase.Platform.Forms.Components.FormViewer.Instance().getControlHelpHtml(prop);
                    var html = `<div class="floating-label-form-group div_PhoneNumber div_${prop.DocPropertyName} ${helpClass}"><label for="lbl" id="lbl_phno">${helpTooltipHtml}<span class="label-name">${prop.LabelName}</span><span class="text-danger ${Isrequired}" id="spnIsRequired_${prop.FormPropertyId}"> *</span></label><div class="input-group">` +
                        '<input type="text" data-regularexp="' + regExpr + '" data-validatemsg="' + ErrMsg + '" id="txtPhn_' + prop.DocPropertyName + '" maxlength="10" value="" class="type-control form-control type-control value-control ' + required + ' floating-label-control" data-isdynamic="false" placeholder="' + prop.LabelName + " " + reqMark + '" data-placeholder="' + prop.Placeholder + '" data-label="' + prop.LabelName + " " + reqMark + '" data-required="' + prop.IsRequired + '" data-regularexp="" data-validatemsg="" inputmode="numeric"/>' +
                        '<a href="javascript:;" class="input-group-addon bg-white no-border text-ul font-bold" id="a_Verify_' + prop.DocPropertyName + '"><font color="green">Verify</font></a>' +
                        '<input type="hidden" id="hf_' + prop.DocPropertyName + '" /><label for="Validation" id="lblValidation_' + prop.DocPropertyName + '"></label><input type="hidden" id="hfFormPropertyId" /></div>' +
                        '<input type="hidden" id="hf_' + prop.ControlId + '" /></div>' + helpTextHtml + '</div>';
                    var html1 = '<div class="col-sm-6 divCustomProperties div_Otp_' + prop.DocPropertyName + ' hidden" data-formpropertyname="otp" data-validatename="OTP"><div class="border-left-0 floating-label-form-group"><label for="lbl" id="lbl_Otp_' + prop.DocPropertyName + '">OTP<span class="text-danger ' + Isrequired + '" id="spnIsRequired_' + prop.FormPropertyId + '"> *</span></label><div class="input-group">' +
                        '<input type="text" data="txt_otp" id="txtOtp_' + prop.DocPropertyName + '" maxlength="6" value="" class="type-control form-control type-control value-control ' + required + ' floating-label-control" data-isdynamic="false" placeholder="OTP *" data-placeholder="Enter OTP" data-label="OTP *" data-required="' + prop.IsRequired + '" data-regularexp="" data-validatemsg="" inputmode="numeric" />' +
                        '<a href="javascript:;" class="input-group-addon bg-white no-border text-ul font-bold" id="btn_submit_' + prop.DocPropertyName + '"><font color="green">Submit</font></a>' +
                        '<input type="hidden" id="hf_' + prop.DocPropertyName + '" /><label for="Validation" id="lblValidation_' + prop.DocPropertyName + '"></label><input type="hidden" id="hfFormPropertyId" /></div></div>' +
                        '<input type="hidden" id="hf_' + prop.ControlId + '" /></div></div>';
                    $("#" + containerid).append(html);
                    $("#" + containerid).after(html1);
                }
                loadControlSettings(controlsettingjson, formpropertyid) {
                    return null;
                }
                loadPropertySettings(propertysettings, formpropertyid) {
                    if (propertysettings != null) {
                        for (var i = 0; i < propertysettings.length; i++) {
                            var data = propertysettings[i];
                            if (data.ControlPropertyName == "IsVerify") {
                                if (data.ControlPropertyValue == "true") {
                                    $("#a_Verify_" + this.docpropertyname).addClass('hidden');
                                    $('#txtOtp_' + this.docpropertyname).removeClass('required');
                                }
                            }
                        }
                    }
                }
                SendOtp(ContactNumber, docpropertname) {
                    var instance = this;
                    var postData = {
                        ContactNumber: ContactNumber,
                    };
                    Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('platform/controls/phonenumber/managers/phonenumbermanager.js', function () {
                        Unibase.Platform.Controls.Phonenumber.Managers.PhonenumberManager.Instance().sendOtp(postData).then(function (response) {
                            var data = response.result;
                            var value = data.replace(/['"]+/g, '');
                            var str1 = window.atob(value);
                            var str2 = str1.split('');
                            var otp = "";
                            otp = otp.concat(str2[0], str2[2], str2[4], str2[6], str2[8], str2[10]);
                            instance.Otp = otp;
                            $("#hf_" + docpropertname).val('');
                            $("#hf_" + docpropertname).val(otp);
                            if (otp.length != 0 && otp == "Phone number already exist") {
                                $("#txtPhn_" + docpropertname).attr("disabled", "disabled");
                                $("#a_Verify_" + docpropertname).text('Verify').css('color', 'deepskyblue');
                            }
                            else {
                                MessageHelper.Instance().showSuccess("OTP sent successfully", "");
                            }
                        });
                    });
                }
                SubmitOTP(docpropname) {
                    var instance = this;
                    var formid = $("#txtPhn_" + docpropname).parents('.formValidate').attr('id');
                    var errormsg = $("#" + formid).find('.bizgaze_FormErrorMessages').attr('id');
                    if ($("#txtOtp_" + docpropname).val() == "")
                        $("#lbl_Otp_" + docpropname).text("Please Enter OTP!").addClass('text-danger', '');
                    else {
                        var OtpVal = $("#txtOtp_" + docpropname).val();
                        if (OtpVal != "" && OtpVal == instance.Otp) {
                            var isverfied = $(".hdn_isverified");
                            isverfied.val(true);
                            $("#txtOtp_" + docpropname).removeClass('required');
                            $("#btn_submit_" + docpropname).addClass('hidden');
                            $("#txtOtp_" + docpropname).val('');
                            $("#txtOtp_" + docpropname).removeClass("required");
                            $(".div_Otp_" + docpropname).addClass('hidden');
                            $("#a_Verify_" + docpropname).text('Verified ✔').css('color', 'green').addClass('otp_verified');
                            $("#txtPhn_" + docpropname).attr("disabled", "disabled");
                            $('#txtPhn_' + docpropname).css('color', '#999');
                            $('#txtPhn_' + docpropname).css('background-color', '#f8f8f8');
                            $('#txtPhn_' + docpropname).css('cursor', 'not-allowed');
                            MessageHelper.Instance().showSuccess("OTP Verified successfully", "" + errormsg);
                        }
                        else {
                            $('#txtOtp_' + docpropname).val('');
                            $("#txtOtp_" + docpropname).focusout();
                            $("#btn_submit_" + docpropname).addClass("hidden");
                            MessageHelper.Instance().showError("Please Enter Valid OTP", "" + errormsg);
                            $("#txtOtp_" + docpropname).addClass('form-group-required');
                        }
                    }
                }
                bindEditFormDetails(formpropertyid, propval, DocPropertyName) {
                    var instance = this;
                    if (propval != '') {
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('apps/crm/contacts/managers/contactmanager.js', function () {
                            Bizgaze.Apps.Crm.Contacts.Managers.ContactManager.Instance().getContactnumuberdetails(propval).then(function (res) {
                                if (res.result.IsVerified == true) {
                                    $("#a_Verify_" + DocPropertyName).text('Verified ✔').css('color', 'green').addClass('otp_verified');
                                    $("#txtPhn_" + DocPropertyName).attr("disabled", "disabled");
                                    $('#txtPhn_' + DocPropertyName).css('color', '#999');
                                    $('#txtPhn_' + DocPropertyName).css('background-color', '#f8f8f8');
                                    $('#txtPhn_' + DocPropertyName).css('cursor', 'not-allowed');
                                }
                            });
                            $("#txtPhn_" + DocPropertyName).val(propval);
                        });
                        $(".div_" + DocPropertyName).addClass("floating-label-form-group-with-value");
                    }
                }
                static Instance() {
                    if (this.instance === undefined) {
                        this.instance = new PhoneNumber();
                    }
                    return this.instance;
                }
            }
            Controls.PhoneNumber = PhoneNumber;
        })(Controls = Forms.Controls || (Forms.Controls = {}));
    })(Forms = Unibase.Forms || (Unibase.Forms = {}));
})(Unibase || (Unibase = {}));