anwisystems/dist/js/shoppingcart/select_delivery.js

function initSelectDevlivery() {
    let editMode = false;
    let countryId = null;
    let currencyId = null;
    let billingInfo = null;
    let userName = null;
    let stateArr = [];
debugger;


let Newuser =window.localStorage.getItem('isaccountCreated');
        let Loginstatus =window.localStorage.getItem('Isloggedintoaster')
        if(Newuser == 'true'){
           
            toasterHelper("success","Account Created Successfully");
            window.localStorage.removeItem('isaccountCreated')
            
        }
        if(Loginstatus == 'true'){
            toasterHelper("success","Isloggedintoaster");
            window.localStorage.removeItem('Isloggedintoaster')
            
        }

    $('.mianselectdelivery').removeClass('d-none');
    $('.containermaindev').removeClass('d-none');
   
    let orderBtnAction = {
        removeOrdernowBtn() {
            $('.ordernowbtn').parent().addClass('d-none');
        },

        addOrdernowBtn() {
            $('.ordernowbtn').parent().removeClass('d-none');
        }
    }

    let addresslistAction = {
        removeAddressContainer(){
            $('.addresslist').addClass('d-none');
        },
        addAddressContainer(){
            $('.addresslist').removeClass('d-none');
        }
    }

    let changeAddressBtnAction = {
        removeChangeAddressBtn() {
            $('.changeAddressBtn').addClass('d-none');
        },
        addChangeAddressBtn() {
            $('.changeAddressBtn').removeClass('d-none');
        }
        
    }

    let changesaveCancelBtnAction = {
        removeChangeCancelBtn() {
            $('.saveanddeliverCanel').addClass('d-none');
        },
        addChangeCancelBtn() {
            $('.saveanddeliverCanel').removeClass('d-none');
        }
        
    }

    let saveFormLoading = {
        addSpinner(){
            $('.saveanddeliver').find('.spinner-border').removeClass('d-none');
            $('.saveanddeliver').find('span').addClass('d-none');
        },

        removeSpinner(){
            $('.saveanddeliver').find('.spinner-border').addClass('d-none');
            $('.saveanddeliver').find('span').removeClass('d-none');
        },
    }
    let paymentgatewaypageAction = {
        addPaymentgatewaypage(){
            $('.paymentgatewaypage').removeClass('d-none');
        },

        removePaymentgatewaypage(){
            $('.paymentgatewaypage').addClass('d-none');
        }
    }

    let paymentContainerAction = {
        paymentContainerAdd(){
            $('.orderslist').parent().removeClass('d-none');
        },

        paymentContainerRemove(){
            $('.orderslist').parent().addClass('d-none');
        }
    }

    const {phonenumber_errorhandler,addressdes_errorhandler,zipcode_errorhandler,state_errorhandler} = factoryErrorControl();

    function init() {
        getAddressRes();
        loadEvents();
        updateSummaryPriceAdd();
        // changeAddressBtnAction.removeChangeAddressBtn();

    }

    function removeAllFormError(){
        phonenumber_errorhandler.removeError();
        addressdes_errorhandler.removeError();
        zipcode_errorhandler.removeError();
        state_errorhandler.removeError();

        $('.errMsgFormEdit').addClass('d-none');
        $('.errMsgFormEdit').html('');

    }

    function clearAllInputs(){
        // $("#state").select2({
        //     placeholder: "Select a City",
        //     allowClear: true
        // });

        $('#state').val(null);

        $('#phonenumber').val(null);
        $('#addressdes').val(null);
        $('#zipcode').val(null);
    }

    async function appendFormDetails(){
        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
        console.log(cookieRes);
        const { errorMsg, isError, response } = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/anwiauth/getbillinginfo/contactid/${cookieRes.userId}`);
        let res = JSON.parse(response.result)[0];
        debugger;
        const {cityid, lobid,organizationname,addressline,cityname,phonenumber,zipcode,name } =res;

        setAddressHeader({name:organizationname,phonenumber,addressline,cityname,zipcode});

        $('#phonenumber').val(phonenumber);
            $('#addressdes').val(addressline);
            $('#zipcode').val(zipcode);
            debugger;
             $('#state').attr('data-id',cityid);
            $('#state').val(cityname)
            $('.userNamelogin').html(`${userName}`);

        editMode = true;
//        console.log(stateArr);
        renderCustomStateDropdown(stateArr);
        //renderStates(stateArr);

    }

    async function getAddressRes() {
        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
        console.log(cookieRes);
        const { errorMsg, isError, response } = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/anwiauth/getbillinginfo/contactid/${cookieRes.userId}`);

        let res = JSON.parse(response.result);
        console.log(res, 'befores');
        res = res[res.length - 1];

        //createBillingForm();

        const {cityid, lobid,organizationname,addressline,cityname,phonenumber,zipcode,name } =res;
        billingInfo = res;
        debugger;
        console.log(res);
        if (cityid != 0) {
            $('.addnewAddressContainer').addClass('d-none');
            $('.detailsAddressBg').removeClass('detailsAddressBg');
            $('.ordersummaryheader').addClass('detailsAddressBg');
            $('.displayadress').removeClass('d-none')
            // $('.addresslist').removeClass('d-none');
            loadShippingProducts();
            userName = organizationname;
            
            setAddressHeader({name:organizationname,phonenumber,addressline,cityname,zipcode});
            debugger;
           
            editMode = true;


            // adding values

            $('#phonenumber').val(phonenumber);
            $('#addressdes').val(addressline);
            $('#zipcode').val(zipcode);
            debugger;
             $('#state').attr('data-id',cityid);
            $('#state').val(cityname);
            $('.userNamelogin').html(`${userName}`);
            changeAddressBtnAction.addChangeAddressBtn()
            getCountryStateCurrency();
        }else{
            $('.userNamelogin').html(`${organizationname}`);
            loadShippingProducts();
            paymentContainerAction.paymentContainerRemove();
            getCountryStateCurrency();
            orderBtnAction.removeOrdernowBtn();
            $('.detailsAddressBg').removeClass('detailsAddressBg');
            $('.selectAddress').addClass('detailsAddressBg');
        }
    }

    function setAddressHeader({name,phonenumber,addressline,cityname,zipcode}){
        $('.innerDisplayAddress').html(`${phonenumber}, ${addressline}, ${cityname} - `);
        $('.zipcodeAddress').html(`${zipcode}`);

    }

    function checkForm(){
   
        let number = $('#phonenumber').val();
        let zipcode = $('#zipcode').val();
        let state = $('#state').data('id');
        let address = $('#addressdes').val();

        let isTrue = false;
        if(!number || number.length!=10){
            isTrue = true;
            phonenumber_errorhandler.addError();
        }

        if(zipcode.length<6 || zipcode.length>6){
            isTrue = true;
            zipcode_errorhandler.addError();
        }

        if(!state){
            isTrue = true;
            state_errorhandler.addError();
        }

        if(!address){
            isTrue = true;
            addressdes_errorhandler.addError();
        }

        return isTrue;


    }

    async function createBillingForm(){
        debugger;
        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
        let { userId, name } = cookieRes;
        const ctyId =   await getCountryId();
        
        let stateId = parseInt($('#state').data('id'));
         let payload = {
                "cityid": stateId,
                "CityName":$(`[data-id="${stateId}"`).html(),
                "addressline1": $('#addressdes').val(),

                "OrganizationType": 2,
                "organizationname": name,
                //"OrganizationId":,
                "ContactName": name,
                "ContactId": userId,
                "countryname": 'india',
                "countryid": ctyId,
                "statename":$(`[data-id="${stateId}"`).html(),
                "phonenumber": $('#phonenumber').val(),

                "OrganizationId": userId,
                "currencyid": 2,
                "taxno": '0',
                "BillingInfoExists": false,
                "lobid": 0,
                "lobname": "IT Products",
                "gstindetailid": 0,
                zipcode:$('#zipcode').val()
            }
            const res = await API_SERVICES_ACTIONS.postAPIService('apis/v4/bizgaze/crm/address/savebillinginfo', payload);
            // http://localhost:3088/apis/v4/bizgaze/crm/address/savebillinginfo


            setAddressHeader({name,phonenumber:$('#phonenumber').val(),addressline: $('#addressdes').val(),cityname:$('#state').val(),zipcode:$('#zipcode').val()});

            return new Promise((reslove,reject) => {
                reslove(res);
            })
        console.log(res);
    }

    async function saveForm() {
        
        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
        let { userId, name } = cookieRes;
        const { errorMsg, isError, response } = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/anwiauth/getbillinginfo/contactid/${cookieRes.userId}`);

        let resAnwi = JSON.parse(response.result);
        console.log(resAnwi, 'befores');
        resAnwi = resAnwi[resAnwi.length - 1];

        let stateId = parseInt($('#state').data('id'));
        let payload = {
            ...resAnwi,
            phonenumber:$('#phonenumber').val(),
            addressline1:$('#addressdes').val(),
            zipcode:$('#zipcode').val(),
            cityid:stateId,
            CityName:$('#state').val(),
           
        }

        console.log(payload,"ertyuioghjkl");


      
        //
        const res = await API_SERVICES_ACTIONS.postAPIService('apis/v4/bizgaze/crm/address/savebillinginfo', payload);

        return new Promise((reslove,reject) => {
            reslove(res);
        })
    }


    function onChangeState(e){
        let userItem = e.target.value.toLowerCase();
        let limit = 10;
        let results = [];
        let maxLen = stateArr.length > 10 ? 10 :stateArr.length;
        debugger
        for(let i=0;i<stateArr.length;i++){
            let currItem = stateArr[i];
            let stateName = currItem.cityname.toLowerCase();
            if(stateName.includes(userItem)){
                results.push(currItem);
                if(results.length>=10) break;
            }
        }

        renderCustomStateDropdown(results);
        loadDropdownStateEvents();


    }

    function loadDropdownStateEvents(){
        $('#state').off().focus(function (){
            $('.stateBox').removeClass('d-none');
            $(document).off('click').click(closeDrop);

           
        })

     
        $(document).off().click(closeDrop);

        function closeDrop(e){
            let id = $(e.target).hasClass('stateoption');
            if($(e.target).attr('id')==='state') return;
            if(id) {
                $('.stateBox').addClass('d-none');
                $(document).off();
            }else{
                $('.stateBox').addClass('d-none');
                $(document).off();
            }

        }

        $('#state').keyup(debounce(function (event){
            onChangeState(event)
        })); 
    }
    

    async function loadEvents() {

        loadDropdownStateEvents();

        $('.addnewAddressContainer').off('click').click(function (e) {
            $('.addnewAddressContainer').addClass('d-none');
            $('.addresslist').removeClass('d-none');
            changeAddressBtnAction.removeChangeAddressBtn();
            changesaveCancelBtnAction.addChangeCancelBtn();
           
        });

        $('.saveanddeliverCanel').off('click').click(function (){
           if(!editMode){
            $('.addnewAddressContainer').removeClass('d-none');
            $('.addresslist').addClass('d-none');
            changeAddressBtnAction.removeChangeAddressBtn();
            changesaveCancelBtnAction.removeChangeCancelBtn();
           }else{
            loadShippingProducts();
            addresslistAction.removeAddressContainer()
            changeAddressBtnAction.addChangeAddressBtn();
            paymentContainerAction.paymentContainerAdd();
            $('.displayadress').removeClass('d-none');
           }

           clearAllInputs();
        });

        $('.changeAddressBtn').off('click').click(function (e){
            console.log(e.target);
            //getAddressRes();
            appendFormDetails();
            removeOrderSummary();
            changeAddressBtnAction.removeChangeAddressBtn();
            $('.displayadress').addClass('d-none')
        })

        
        $('.saveanddeliver').off('click').click(async function (e) {
           debugger;
            saveFormLoading.addSpinner()
            let isErrorForm =  checkForm();

            if(isErrorForm){ 
                saveFormLoading.removeSpinner();
                return;
            }
            let res;
            if(editMode){
                res = await saveForm();
            }else{
                res = await createBillingForm();
            }
            saveFormLoading.removeSpinner();

       
            const {isError,errorMsg,response} = res;
            console.log(errorMsg);
            if(isError){

                $('.errMsgFormEdit').removeClass('d-none');
                $('.errMsgFormEdit').html(`${errorMsg.message}`);



                return;
            }
            debugger;
            editMode = true;
            let {name} = COOKIE_HELPER.getCookie();
            // phonenumber:$('#phonenumber').val(),
            // addressline1:$('#addressdes').val(),
            // zipcode:$('#zipcode').val(),
            // cityid:stateId,
            // CityName:$(`[data-id="${stateId}"`).html(),
            let stateId = parseInt($('#state').data('id'));
            setAddressHeader({name,addressline:$('#addressdes').val(),cityname:$(`#state`).val(),phonenumber:$('#phonenumber').val(),zipcode:$('#zipcode').val()});


            $('.errMsgFormEdit').html('');
             loadShippingProducts();
            addresslistAction.removeAddressContainer()
            changeAddressBtnAction.addChangeAddressBtn();
            paymentContainerAction.paymentContainerAdd();
            $('.displayadress').removeClass('d-none');
         

        });
       

        $('.ordernowbtn').off().click(async function (e){
            let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
            let { userId, name } = cookieRes;
           
            paymentgatewaypageAction.addPaymentgatewaypage();
            let payload = {
                "OrganizationName": name,
                "BranchId": 106632280000001,
                "OrderItems": [
                    {            
                        "UnitPrice": 20,
                        "Quantity": 1,
                        "SKU": "11",
                        "DiscountValue": 0,
                        "DiscountPercent": 0
                    }
                ]
            }
            $('.paymentgatewaypage').removeClass('d-none');
            const data = getCartData();
       
            let orderItems = [];
            for(let i in data){
                const {price,quantity,sku} = data[i];
                let payload = {
                    "UnitPrice": price,
                    "Quantity": quantity,
                    "SKU": sku,
                    "DiscountValue": 0,
                    "DiscountPercent": 0
                }
                orderItems.push(payload)
            }

            payload['OrderItems'] = orderItems;

            debugger;
          try {
            const res =  await API_SERVICES_ACTIONS.postAPIService(`apis/v4/bizgaze/integrations/salesorder/save`,payload);
          console.log(res.response.result);;

          if(!res.response.result){
            paymentgatewaypageAction.removePaymentgatewaypage();
          }


         
        //   `http://localhost:3088/apis/v4/bizgaze/transact/orders/getpaymentgatewaytransaction/refid/106633780000069`

          let response =  await  API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/transact/orders/getpaymentgatewaytransaction/refid/${res.response.result}`);
         let  {PaymentLink} = JSON.parse(response.response.result);
         window.location.href = PaymentLink;
          } catch (error) {
            paymentgatewaypageAction.removePaymentgatewaypage();
          }
        });
    }

    function getItemProductHTML(item) {
        const { img, name, price, quantity, sku, id } = item;

        return ` <div class="align-items-center item-product-add d-flex w-100" data-id="${id}" data-sku="${sku}">
        <div style="max-width: 100px;" class="">
            <img class="w-100" src="${img}" alt="">
        </div>
       <div class="" style="margin-left:10px">
        <div>
            <div style="font-size:12px">${name}</div>
        </div>
        <div>
            <span style="font-size:12px" class="font-weight-600">${getCurrencySymbol(price)}</span> <span>x <span class="qtyitem" style="font-size:12px">${quantity}</span></span>
        </div>
       </div>
    </div>`;
        return ` <div class="item-product-add" data-id="${id}" data-sku="${sku}">
        <div class="row py-2">
            <div class="col-sm-2">
               <div class="w-100 d-flex justify-content-around">
                <div class="d-flex flex-column align-items-baseline">
                    <div class="px-4 py-2 selectaddressimgshow">
                        <img class="w-100" src="${img}" alt="" class="w-100">
                    </div>
                    <div class="addresscontrol w-100 d-flex justify-content-center gap-1">
                        <div class="rounded-contain btnminus">
                            -
                        </div>
                        <div class="w-100p">
                            <input class="qtyshowinput" disabled value="${quantity}" type="number">
                        </div>
                        <div class="rounded-contain btnplus">
                            +
                        </div>
                    </div>
                   </div>
               </div>
            </div>
            <div class="col-sm-10">
                <div class="row h-100">
                   <div class="col-sm-8">
                    <div class="h-100 d-flex flex-column justify-content-between">
                        <div> ${name}</div>
                        <div>
                           <span>$</span> ${price} <span class="d-none">56% Off 2 offers applied</span>
                        </div>
                    <div class="d-flex gap-3">
                        <span class="text-uppercase d-none">Save for later</span>
                        <span class="text-uppercase cursor-pointer removecartItem">Remove</span>
                    </div>
                    </div>
                   </div>
                </div>
            </div>
        </div>
      </div>`;
    }

    async function getCountryId(){
        const countryRes = await API_SERVICES_ACTIONS.getAPIService('apis/v4/bizgaze/integrations/anwiauth/getcountry');;
        
        if (countryRes.isError) {
            alert("something went wrong");
            console.log(countryRes);
            return;
        }

        let ctyId = 0
        let countryData = JSON.parse(countryRes.response.result);

        console.log(countryData);

        for (let i = 0; i < countryData.length; i++) {
            if (countryData[i].countryname.toLowerCase() === 'india') {
                debugger;
                countryId = countryData[i].countryid;
                ctyId = countryId
                countrynameData = countryData[i].countryname;
                break;
            }
        }

        return ctyId;

    }

    function renderStates(data){
        $('#state').off('select2:select');
        let html = '';
        for (let i = 0; i < 10; i++) {
            html += `<option value="${data[i].cityid}" data-id="${data[i].cityid}">${data[i].cityname}</option>`

        }

        $('#state').append(html);
        $("#state").select2({
            placeholder: "Select a City",
            allowClear: true
        });
    }

    async function getCountryStateCurrency() {
        const countryRes = await API_SERVICES_ACTIONS.getAPIService('apis/v4/bizgaze/integrations/anwiauth/getcountry');;

        if (countryRes.isError) {
            alert("something went wrong");
            console.log(countryRes);
            return;
        }


        let countryData = JSON.parse(countryRes.response.result);

        console.log(countryData);

        for (let i = 0; i < countryData.length; i++) {
            if (countryData[i].countryname.toLowerCase() === 'india') {
                countryID = countryData[i].countryid;
                countrynameData = countryData[i].countryname;
                break;
            }
        }

        //    const stateRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/unibase/platform/forms/autocomplete/docpropertyid/116631530005773/columnname/statusid/value/1%7C/formpropertyid/116631620000066/formid/116631640000040/bindeddata/undefined/term/h/authtoken/2cd31fdd-440b-4eea-9039-659ab090628a?term=h&type=GET`);
        const stateRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/anwiauth/getcities/countryid/${countryID}`);

        if (stateRes.isError) {
            alert("something went wrong");
            console.log(stateRes);
            return;
        }

        let stateData = JSON.parse(stateRes.response.result);

//        console.log(stateData, 'state');


        $('#state').val(null);
        console.log("start")
        let html = '';
        statesList = stateData;
        stateArr = stateData;
        renderCustomStateDropdown(stateArr);
        //renderStates(stateArr)

       

        const currencyRes = await API_SERVICES_ACTIONS.getAPIService('apis/v4/bizgaze/integrations/anwiauth/getcurrencies');

        if(currencyRes.isError){
            alert("something went wrong");
            console.log(currencyRes);
            return;
        }

        let currencyData = JSON.parse(currencyRes.response.result);

        console.log(currencyData,'currencyDatacurrencyDatacurrencyData');

        for(let i=0;i<currencyData.length;i++){
            const curr = currencyData[i];
            if(curr.currencyname.toLowerCase().includes('india')){
                currencyid = curr.currencyid;
            }
        }
    }

    function getCustomDropDownHTML({cityid,cityname,countryid}){
        return ` <div class="bg-white stateoption px-2 border-bottom py-2 cursor-pointer" data-name="${cityname}" data-value="${cityid}">${cityname}</div>`;
    }

    function renderCustomStateDropdown(stateList){
        let html = ``;
        debugger;;
        let maxLen = stateList.length > 10 ? 10 :stateList.length
        for(let i=0;i<maxLen;i++){
            let currItem = stateList[i];
            html+=getCustomDropDownHTML(currItem);
        }

        $('.stateBox').html(html);

        $('.stateoption').off().click(function(e){
            debugger;
            const name = $(e.target).data('name');
            const id = $(e.target).data('value');
            $('#state').val(name);
            $('#state').attr('data-id',id);
        })
    }

    function loadShippingProducts(){
        $('.detailsAddressBg').removeClass('detailsAddressBg');
        $('.ordersummaryheader ').addClass('detailsAddressBg')
debugger;
        const products = getCartData();
        console.log(products);
        if (Object.keys(products||{}).length) orderBtnAction.addOrdernowBtn();

        let productsHTML = '';
        for (let item in products) {
            const currItem = products[item];
            productsHTML += getItemProductHTML({ ...currItem, id: item })
        }
        $('.orderlistcart').html(productsHTML);
        // $('.orderslist').html(productsHTML);
        $('.orderslist').addClass("p-3")
        $('.orderslist').html(` <label for="online">
        <input checked data-op="online" name="payment" type="radio" class="paymentbtn   " id="online">
        <span>Pay Via (Card, Net Banking, Wallet)</span>
       
    </label>
    <label for="cod" class="d-none">
        Cash on delivery
        <input data-op="cod" name="payment" type="radio" class="paymentbtn  " id="cod">
    </label>`);

    $('.paymentbtn').off().click(function (e){
        const data = $(e.target).data('op');
        if(data == 'online'){
            orderBtnAction.addOrdernowBtn();
        }else{
            orderBtnAction.removeOrdernowBtn();
        }
    })
        $('.btnminus').each(function (i, el) {
            $(el).off().click(function (elm) {
                let id = $(elm.target).parents('.item-product-add').data('id');
                let val = parseInt($(elm.target).parents('.item-product-add').find('.qtyshowinput').val());
                if (val <= 1) return;
                val--;
                updateCartQuantity(id, val)
                $(elm.target).parents('.item-product-add').find('.qtyshowinput').val(val)
            });
        })
        $('.btnplus').each(function (i, el) {
            $(el).off().click(function (elm) {
                let id = $(elm.target).parents('.item-product-add').data('id');
                let val = parseInt($(elm.target).parents('.item-product-add').find('.qtyshowinput').val());
                if (val >= 11) return;
                val++;
                updateCartQuantity(id, val)
                $(elm.target).parents('.item-product-add').find('.qtyshowinput').val(val);
            });
        })
        $('.removecartItem').each(function (i, el) {
            $(el).click(function (elm) {
                let id = $(elm.target).parents('.item-product-add').data('id');

                let len = removeCartItem(id);
                $(`.item-product-add[data-id="${id}"]`).remove();
                if (!len) {
                    orderBtnAction.removeOrdernowBtn();
                }
            });


        })
    }

    function removeOrderSummary(){
        $('.detailsAddressBg').removeClass('detailsAddressBg');
        $('.selectAddress').addClass('detailsAddressBg');
        $('.orderslist').html('');
        $('.orderslist').removeClass("p-3");
        orderBtnAction.removeOrdernowBtn();

       // $('.detailsAddressBtn').addClass('d-none');
        addresslistAction.addAddressContainer();
        $('.saveanddeliver').removeClass('d-none');
        $('.saveanddeliverCanel').removeClass('d-none')
    }

    function factoryErrorControl(){
        let inputsArr = ['phonenumber','addressdes','zipcode','state'];

        let controls = {};
        for(let i=0;i<inputsArr.length;i++){
            const id =inputsArr[i];

            controls[`${id}_errorhandler`] = {
                addError(){
                    debugger;
                    $(`#${id}`).parents('.col-sm-6').find('.invalid-feedback').addClass('d-block');
                },
                removeError(){
                    $(`#${id}`).parents('.col-sm-6').find('.invalid-feedback').addClass('d-block');
                }
            }

        }

        return controls;
    }

    init();

}

checkValidAuth(initSelectDevlivery);