Untitled

window.addEventListener('load', function () {

    // Callback function to execute when mutations are observed
        for (const mutation of mutationList) {
            if (mutation.type === "childList") {
                console.log(`The ${mutation.attributeName} attribute was modified.`);
                const shipping_method = document.getElementById('checkout-shipping-options');

                const buttonDiv = document.createElement("div");
                buttonDiv.classList.add('form-body');
                buttonDiv.setAttribute('id','custom-shipping-select');

                buttonDiv.innerHTML = `<div class="shippingOptions-container-custom form-fieldset"><div class="loadingOverlay-container"><ul class="form-checklist optimizedCheckout-form-checklist"><li class="form-checklist-item optimizedCheckout-form-checklist-item"><div class="form-checklist-header"><div class="form-field"><input id="pick-up" type="radio" class="form-checklist-checkbox optimizedCheckout-form-checklist-checkbox" name="custom-shippingOptionIds" value=""><label for="pick-up" class="form-label optimizedCheckout-form-label" onclick="check1()" ><div class="shippingOptionLabel"><div class="shippingOption shippingOption--alt"><span class="shippingOption-desc">Will Call Pickup</span><span class="shippingOption-price">$0.00</span></div></div></label></div></div></li><li class="form-checklist-item optimizedCheckout-form-checklist-item form-checklist-item--selected optimizedCheckout-form-checklist-item--selected"><div class="form-checklist-header form-checklist-header--selected"><div class="form-field"><input id="delivery" type="radio" class="form-checklist-checkbox optimizedCheckout-form-checklist-checkbox" name="custom-shippingOptionIds" value=""><label for="delivery" class="form-label optimizedCheckout-form-label" onclick="check2()" ><div class="shippingOptionLabel"><div class="shippingOption shippingOption--alt"><span class="shippingOption-desc">Delivery</span><span class="shippingOption-price">$0.00</span></div></div></label></div></div></li></ul></div></div>`;

                const shipping_select = document.getElementById('custom-shipping-select');

                if (!shipping_select) shipping_method.append(buttonDiv);
            }
        };

    const observer = new MutationObserver(callback);

    function addObserverIfShippingAvailable() {
        // Select the node that will be observed for mutations
        const targetNode = document.querySelectorAll('.checkout-step--shipping')[0];

        if (!targetNode) {
            //The node we need does not exist yet.
            //Wait 500ms and try again
            window.setTimeout(addObserverIfShippingAvailable, 500);
            return;
        }

        // Options for the observer (which mutations to observe)
        const config = {attributes: true, childList: true, subtree: true};

        // Start observing the shipping_target node for configured mutations
        observer.observe(targetNode, config);
    }

    addObserverIfShippingAvailable()

    // Later, you can stop observing
    observer.disconnect();
});

//Pickup option
function check1(){
    document.getElementById('checkoutShippingAddress').style.display = 'none';
    document.querySelector('[data-test = "shipping-address-heading"]').style.display = 'none';

    FillForm();

    let texts_pick = document.querySelectorAll('.shippingOption-desc');
    let pick_in_store;
    texts_pick.forEach(el => {
        if (el.innerText === 'Pickup In Store') {
            let label = el.parentNode.parentNode.parentNode;
            pick_in_store = label.previousSibling.id;
            console.log(pick_in_store);
        }
    });

    document.getElementById(pick_in_store).checked = true;

}

//Delivery option
function check2(){
    document.getElementById('checkoutShippingAddress').style.display = 'block';
    document.querySelector('[data-test = "shipping-address-heading"]').style.display = 'block';

    let texts_delivery = document.querySelectorAll('.shippingOption-desc');
    let will_call_pickup;
    texts_delivery.forEach(el => {
        if (el.innerText === 'Flat Rate(NY & CA)') {
            let label = el.parentNode.parentNode.parentNode;
            will_call_pickup = label.previousSibling.id;
            console.log(will_call_pickup);
        }
    });
    const delivery_option = document.getElementById(will_call_pickup);
    if (!delivery_option){
        window.setTimeout(check2, 500);
        return;
    }
    delivery_option.checked = true;

}
function FillForm(){
    //get form elements
    // const first_name = document.getElementById('firstNameInput');
    // const last_name = document.getElementById('lastNameInput');
    // const phone_number = document.getElementById('phoneInput');
    // const address_line_1 = document.getElementById('addressLine1Input');
    // const country_name = document.getElementById('countryCodeInput');
    // const state_name = document.getElementById('provinceCodeInput');
    // const postal_code = document.getElementById('postCodeInput');
    //
    // // default values
    // const d_first_name= 'coalition';
    // const d_last_name ='technology';
    // const d_phone_number = 310820;
    // const d_address_line_1 = '3750 S Robertson Blvd';
    // const d_country_name = 'US';
    // const d_state_name = 'CA';
    // const d_postal_code = 90232;
    //
    // if (first_name.value == null || first_name.value == "") first_name.value = d_first_name;
    // if (last_name.value == null || last_name.value == "") last_name.value = d_last_name;
    // if (phone_number.value == null || phone_number.value == "") phone_number.value = d_phone_number;
    // if (address_line_1.value == null || address_line_1.value == "") address_line_1.value = d_address_line_1;
    // if (postal_code.value == null || postal_code.value == "") postal_code.value = d_postal_code;
    // if (country_name.value == null || country_name.value == "") {
    //     setTimeout(()=> {
    //         country_name.value = d_country_name;
    //         setTimeout(()=> {
    //             if (state_name.value == null || state_name.value == "") state_name.value = d_state_name;
    //         },1500);
    //     },1000);
    // }

    const options = {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: '{"shippingAddress":{},"address":{"firstName":"string","lastName":"string","email":"string","company":"string","address1":"string","address2":"string","city":"string","stateOrProvince":"string","stateOrProvinceCode":"string","countryCode":"string","postalCode":"string","phone":"string","customFields":[{"fieldId":"string","fieldValue":"string"}],"shouldSaveAddress":true},"lineItems":[{"itemId":"string","quantity":0}],"shippingOptionId":"string","pickupOption":{"pickupMethodId":0}}'
    };

    fetch('https://store-umyplbj5km.mybigcommerce.com/api/storefront/checkouts/640cf8de-b604-4594-8349-5a8d728d96b6/consignments', options)
        .then(response => response.json())
        .then(response => console.log(response))
        .catch(err => console.error(err));
}