WebBuild/wwwroot/tenants/themes/compact/components/dashboard/wizard/wizard.js

var Unibase;
(function (Unibase) {
    let Themes;
    (function (Themes) {
        let Compact;
        (function (Compact) {
            let Components;
            (function (Components) {
                let Wizard;
                (function (Wizard_1) {
                    class Wizard {
                        constructor() {
                            this.logoFileData = {};
                        }
                        wizardApp() {
                            let instance = this;
                            let html = `   <!--Wizard div start popup -->
    <a href="javascript:;" class="btn btn-sm btn-primary hidden" data-toggle="modal" data-target="#wizard-multi-step"></a>
    <div id="wizard-multi-step" class="multi-step" data-wizard="Multi-step-form">
    </div><!--Wizard div end popup -->`;
                            var _fileCacheHelper = Unibase.Platform.Helpers.FileCacheHelper.Instance();
                            let result = Unibase.Themes.Compact.Components.Index.Instance().currentTheme;
                            let css = `<style id="wizard"> .multi-step .modal-header .modal-steps .step.completed .dot:before { background: ${result.primaryColor} !important; }.multi-step .modal-header .modal-steps .step.current .dot {border-color: ${result.primaryColor} !important;} .multi-step .modal-header .modal-steps .step.completed:after { border-color: ${result.primaryColor} !important; }.multi-step .modal-header .modal-steps .step.current:after { border-color: ${result.primaryColor} !important; }.multi-step .modal-header .modal-steps .step.completed .dot { border-color: ${result.primaryColor} !important; }
                                   </style>`;
                            $('head').append(css);
                            $('#bizgaze_body + [data-target="#wizard-multi-step"]').remove();
                            $('#bizgaze_body + [id="wizard-multi-step"]').remove();
                            $('#bizgaze_body').after(html);
                            _fileCacheHelper.loadJsFile("libs/wizard/js/MultiStep.js", function () {
                                _fileCacheHelper.loadCssFiles(["libs/wizard/css/MultiStep.min.css", "libs/wizard/css/MultiStep-theme.min.css"], null);
                                eval(`$(document).ready(function () {
                                        $('#wizard-multi-step').MultiStep({
        	                                data:[{
                                                label:'Company Details',
        		                                content:'<ul class="d-flex flex-column"><li class="d-flex flex-column li_CompanyName pt-1 pb-20" id="li_CompanyName"><label for="txt_companyName" class="" id="lbl">Company Name<span class="text-danger"> *</span></label> <input type="text" id="txt_companyName" class="form-control floating-label-control shadow-none" data-validation="true" placeholder="Company Name *" data-placeholder="Enter Company Name" data-validatename="Company Name" data-label="Company Name *" required></li><li class="d-flex flex-column li_ShortCode pt-1 pb-20" id="li_ShortCode"><label for="txt_cmpyShortCode" class="" id="lbl">Company Short Code<span class="text-danger"> *</span></label> <input type="text" id="txt_cmpyShortCode" class="form-control floating-label-control shadow-none" placeholder="Company Short Code *" data-validation="true" data-placeholder="Enter Company Short Code" data-validatename="Company Short Code" data-label="Company Short Code *" required></li><li class="d-flex flex-column li_gst-number pt-1 pb-20" id="li_gst-number"><label for="txt_gstNumber" class="" id="lbl">GST Number<span class="text-danger"> *</span></label> <input type="text" id="txt_gstNumber" class="form-control floating-label-control shadow-none" data-validation="true" placeholder="GST Number *" data-placeholder="Enter GST Number" data-validatename="GST Number" data-label="GST Number *" required maxlength="15"></li><li><ul class="p-2 d-flex flex-column"><li><p class="font-16 text-center text-dark">Upload Company Logo</p></li><li class="d-flex flex-column mx-auto" onchange="Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().uploadlogo(this);"><div class="file position-relative d-flex justify-content-center mt-2" id="div_logo-File"><label for="txt_logoFile" id="lbl_logo" class="d-flex "><span class="w-50p"><img src="tenants/themes/compact/imgs/cloud.svg" class="img-fluid"></span></label><input type="file" class="d-none" id="txt_logoFile"></div><div style="margin-top:-15px;"><span class="text-dark" id="lblLogoFileName"></span><span class="text-dark hidden" for="txt_logoFile" id="lbl-logo-path"></span><input type="hidden" id="hf_logoPath" value=""></div></li></ul></li></ul>'
        	                                },{
                                                label:'Address Details',
        		                                content:'<ul class="d-flex flex-column"><li class="d-flex flex-column li_BranchName pt-1 pb-20" id="li_BranchName"><label for="txt_BranchName" class="" id="lbl">Branch Name<span class="text-danger"> *</span></label> <input type="text" id="txt_BranchName" class="form-control floating-label-control shadow-none" data-validation="true" placeholder="Branch Name *" data-placeholder="Enter Branch Name" data-validatename="Branch Name" data-label="Branch Name *"></li><li class="d-flex flex-column li_ShortCode pt-1 pb-20" id="li_ShortCode"><label for="txt_ShortCode" class="" id="lbl">Short Code<span class="text-danger"> *</span></label> <input type="text" id="txt_ShortCode" class="form-control floating-label-control shadow-none" data-validation="true" placeholder="Short Code *" data-placeholder="Enter Short Code" data-validatename="Short Code" data-label="Short Code *"></li><li class="d-flex flex-column li_Address pt-1 pb-20" id="li_Address"><label for="txt_Address" class="" id="lbl">Address<span class="text-danger"> *</span></label> <input type="text" id="txt_Address" class="form-control floating-label-control shadow-none" placeholder="Address *" data-validation="true"data-placeholder="Enter Address" data-validatename="Address" data-label="Address *"></li><li><ul class="d-flex justify-content-between"><li class="w-45 d-flex flex-column li_CityName pt-1 pb-20 mr-20" id="li_CityName"><label for="txt_CityName" class="" id="lbl">City Name<span class="text-danger"> *</span></label> <select type="text" id="txt_CityName" class="form-control floating-label-control shadow-none" data-validation="true" placeholder="City Name *" data-placeholder="Enter City Name" data-validatename="City Name" data-label="City Name *"></select></li><li class="w-45 d-flex flex-column li_PinCode pt-1 pb-20" id="li_PinCode"><label for="txt_PinCode" class="" id="lbl">Pin-Code<span class="text-danger"> *</span></label> <input type="number" id="txt_PinCode" class="form-control floating-label-control shadow-none" placeholder="Pin Code *" data-validation="true" data-placeholder="Enter Pin Code" data-validatename="Pin Code" min="0" max="6" data-label="Pin Code *"></li></ul></li></ul>'
        	                                }],
                                            finalLabel:'Confirmation',
                                            final:'<ul class="w-100 d-flex align-items-center flex-column justify-content-center"><li class="w-100 d-flex justify-content-center"><i class="fa-4x fa fa-check-circle text-success"></i></li><li class="mt-20 mb-1 text-center">Your Company information is successfully updated for more help<a class="ml-1" href="javascript:;">Click here</a></li></ul>',
                                            modalSize:'md'
                                        });
                                    Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().logoFileData = {};
                                    Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().autoComplete();
                                    $('[data-target="#wizard-multi-step"]').click();
                                    $('[data-isNext="true"]').on('click', function(){
                                        Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().validation();
                                    });
                                    Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().clickEvent();
                                    $('#txt_gstNumber').on('keydown', function(){
                                    $(this).addClass('text-uppercase');
                                    let gst_val = $(this).val();
                                       if(gst_val.length < 2){
                                    return numericOnly(event);
                                        }
                                    else if((gst_val.length >= 2) && (gst_val.length < 7)){
                                    return alphaOnly(event);
                                        }
                                     else if((gst_val.length >= 7) && (gst_val.length < 11)){
                                    return numericOnly(event);
                                        }
                                    else if((gst_val.length >= 11) && (gst_val.length < 12)){
                                    return alphaOnly(event);
                                        }
                                    else if((gst_val.length >= 12) && (gst_val.length < 13)){
                                    return numericOnly(event);
                                        }
                                    else if((gst_val.length >= 13) && (gst_val.length < 14)){
                                    return alphaOnly(event);
                                        }
                                    else if((gst_val.length >= 14) && (gst_val.length < 15)){
                                    return alphaNumeric(event);
                                        }
                                    })

                                    function alphaOnly(event) {
                                      var key = event.keyCode;
                                    if(((key >= 65 && key <= 90) || key == 8) == false){
                                    MessageHelper.Instance().showError("Please Enter valid GST Number", "div_errroMessage");
                                    }
                                    else if((key >= 65 && key <= 90) || key == 8){
                                    if ($('#Bizgaze-messageInfo')) {
                                        $('#Bizgaze-messageInfo').click()
                                    }
                                    }
                                      return ((key >= 65 && key <= 90) || key == 8);
                                    };
                                    function numericOnly(event) {
                                      var key = event.keyCode;
                                    if(((key >= 47 && key <= 58) || key == 8 || (key > 95 && key < 106)) == false){
                                    MessageHelper.Instance().showError("Please Enter valid GST Number", "div_errroMessage");
                                    }
                                    else if((key >= 47 && key <= 58) || key == 8 || (key > 95 && key < 106)){
                                    if ($('#Bizgaze-messageInfo')) {
                                        $('#Bizgaze-messageInfo').click()
                                    }
                                    }
                                      return ((key > 47 && key < 58) || key == 8 || (key > 95 && key < 106));
                                    };
                                    function alphaNumeric(event) {
                                      var key = event.keyCode;
                                      return ((key > 47 && key < 58) || key == 8 || (key >= 65 && key <= 90));
                                    };
                                });
                                
                            `);
                            });
                        }
                        validation() {
                            let instance = Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().logoFileData;
                            let validation = true;
                            $('.step-content.active').find('[data-validation="true"]').each(function () {
                                if ($(this).val() == '') {
                                    $(this).attr('style', 'border-bottom:1px solid rgb(251, 107, 91) !important');
                                    $(this).on('click', function () {
                                        $(this).attr('style', '');
                                    });
                                    validation = false;
                                    MessageHelper.Instance().showError("Please Enter manadatory", "div_errroMessage");
                                }
                                else if ($('.step-content.active').find('#div_logo-File').length > 0) {
                                    var regex = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;
                                    if (instance == undefined || instance.FileData == undefined || instance.FileName == undefined) {
                                        validation = false;
                                        MessageHelper.Instance().showError("Please Upload Company Logo", "div_errroMessage");
                                    }
                                    else if (regex.test($("#txt_gstNumber").val().toString()) == false) {
                                        validation = false;
                                        MessageHelper.Instance().showError("Please Enter valid GST Number", "div_errroMessage");
                                    }
                                }
                            });
                            if (validation) {
                                if ($('#Bizgaze-messageInfo')) {
                                    $('#Bizgaze-messageInfo').click();
                                }
                                let i = Number($('.step-content.active').attr('data-step'));
                                let j = i + 1;
                                if (i == 3) {
                                    $('a.close-btn').click();
                                    Unibase.Platform.Membership.Infos.Identity.currentUser.settings.filter(function (x) { return x.settingName == "isloginfirsttime"; })[0].settingValue == false;
                                    Unibase.Themes.Compact.Components.Dashboard.Instance().appTourGuide();
                                }
                                if (i != 3) {
                                    $('[id="multi_Step-next"]').click();
                                }
                            }
                        }
                        uploadlogo(e) {
                            let instance = this;
                            const inputEl = document.getElementById('txt_logoFile');
                            const fileType = inputEl.files[0].type.split('/').pop().toLowerCase();
                            if (fileType != "jpeg" && fileType != "jpg" && fileType != "png" && fileType != "bmp" && fileType != "gif") {
                                MessageHelper.Instance().showError('Please select a valid image file', 'layoutBuilderErrMsg');
                                $("#logoUploadInput").val('');
                                return false;
                            }
                            else {
                                const [file] = inputEl.files;
                                let name;
                                if (file) {
                                    const reader = new FileReader();
                                    reader.readAsDataURL(file);
                                    reader.onloadend = function () {
                                        var base64String = reader.result.toString().replace(/^data:.+;base64,/, '');
                                        var fileReq = {
                                            FileData: base64String,
                                            FileName: inputEl.files[0].name,
                                            FileType: fileType,
                                            ByteData: null
                                        };
                                        instance.logoFileData = fileReq;
                                        $('[data-span_file="true"]').remove();
                                        $(inputEl).parents('#div_logo-File').after('<span data-span_file="true">' + inputEl.files[0].name + '</span>');
                                    };
                                }
                            }
                        }
                        clickEvent() {
                            let instance = this;
                            instance.multiStep();
                            $('#multi_Step-prev').on('click', function () {
                                instance.multiStep();
                            });
                        }
                        autoComplete() {
                            Unibase.Themes.Compact.Wizard.Manager.WizardManager.Instance().getCityName().then(function (res) {
                                let response = res.result, data = [];
                                response.forEach(function (item, index) {
                                    data.push({ id: item.cityid, text: item.cityname });
                                });
                                $('#txt_CityName').select2({
                                    placeholder: "Select City",
                                    data: data
                                });
                            });
                        }
                        multiStep() {
                            $('.step-content').each(function (index, item) {
                                if (index == 0 && $(this).hasClass("active")) {
                                    $('#multi_Step-next').attr('onclick', 'Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().companyDetails()');
                                }
                                else if (index == 1 && $(this).hasClass("active")) {
                                    $('#multi_Step-next').attr('onclick', 'Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().BranchDetails()');
                                }
                                else if (index == 2 && $(this).hasClass("active")) {
                                    $('#multi_Step-next').attr('onclick', 'Unibase.Themes.Compact.Components.Wizard.Wizard.Instance().emptyMultiStep()');
                                }
                            });
                        }
                        emptyMultiStep() {
                            $('a.close-btn').click();
                            $('[id="wizard-multi-step"]').remove();
                            $('[data-target="#wizard-multi-step"]').remove();
                        }
                        companyDetails() {
                            let instance = this;
                            if ($('#txt_companyName').val() != "" && $('#txt_cmpyShortCode').val() != "" && $('#txt_gstNumber').val() != 0) {
                                let obj;
                                obj = {
                                    CompanyName: $('#txt_companyName').val(),
                                    ShortCode: $('#txt_cmpyShortCode').val(),
                                    GstInNo: $('#txt_gstNumber').val(),
                                    FileName: instance.logoFileData.FileName,
                                    FileData: instance.logoFileData.FileData
                                };
                                Unibase.Themes.Compact.Wizard.Manager.WizardManager.Instance().saveCompanyDetails(obj).then(function (response) {
                                    if (response.status == 0) {
                                        instance.multiStep();
                                    }
                                    else {
                                        MessageHelper.Instance().showError(response.code, "div_errroMessage");
                                        $("p:nth-child(0)").addClass('active');
                                    }
                                });
                            }
                            else {
                            }
                        }
                        BranchDetails() {
                            let instance = this;
                            console.log("Branch Details");
                            let obj;
                            obj = {
                                AliasName: $('#txt_BranchName').val(),
                                ShortCode: $('#txt_ShortCode').val(),
                                PinCode: Number($('#txt_PinCode').val()),
                                AddressName: $('#txt_Address').val(),
                                CityName: $('#txt_CityName option:selected').text(),
                                Addressline1: " ",
                                CityId: Number($('#txt_CityName option:selected').val())
                            };
                            Unibase.Themes.Compact.Wizard.Manager.WizardManager.Instance().saveBranchDetails(obj).then(function (response) {
                                if (response.status == 0) {
                                    instance.multiStep();
                                }
                                else {
                                    $('.step-content').removeClass('active');
                                    $("p:nth-child(1)").addClass('active');
                                }
                            });
                        }
                        static Instance() {
                            if (this._instance === undefined)
                                this._instance = new Unibase.Themes.Compact.Components.Wizard.Wizard;
                            return this._instance;
                        }
                    }
                    Wizard_1.Wizard = Wizard;
                })(Wizard = Components.Wizard || (Components.Wizard = {}));
            })(Components = Compact.Components || (Compact.Components = {}));
        })(Compact = Themes.Compact || (Themes.Compact = {}));
    })(Themes = Unibase.Themes || (Unibase.Themes = {}));
})(Unibase || (Unibase = {}));