Untitled

(function() {
    try {
        /* main variables */
        var debug = 0;
        var variation_name = "";
        var $;
        /* all Pure helper functions */

        function waitForElement(selector, trigger, delayInterval, delayTimeout) {
            var interval = setInterval(function() {
                if (
                    document &&
                    document.querySelector(selector) &&
                    document.querySelectorAll(selector).length > 0
                ) {
                    clearInterval(interval);
                    trigger();
                }
            }, delayInterval);
            setTimeout(function() {
                clearInterval(interval);
            }, delayTimeout);
        }

        function live(selector, event, callback, context) {
            /****Helper Functions****/
            // helper for enabling IE 8 event bindings
            function addEvent(el, type, handler) {
                if (el.attachEvent) el.attachEvent("on" + type, handler);
                else el.addEventListener(type, handler);
            }
            // matches polyfill
            this.Element &&
                (function(ElementPrototype) {
                    ElementPrototype.matches =
                        ElementPrototype.matches ||
                        ElementPrototype.matchesSelector ||
                        ElementPrototype.webkitMatchesSelector ||
                        ElementPrototype.msMatchesSelector ||
                        function(selector) {
                            var node = this,
                                nodes = (node.parentNode || node.document).querySelectorAll(selector),
                                i = -1;
                            while (nodes[++i] && nodes[i] != node);
                            return !!nodes[i];
                        };
                })(Element.prototype);
            // live binding helper using matchesSelector
            function live(selector, event, callback, context) {
                addEvent(context || document, event, function(e) {
                    var found,
                        el = e.target || e.srcElement;
                    while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
                    if (found) callback.call(el, e);
                });
            }
            live(selector, event, callback, context);
        }
        let egOpend;
        let egFirst= false;
        let egTimeout;
        /* Variation Init */
        function init() {
            /* start your code here */
            egOpend = Array.from(document.querySelectorAll(".l-wizard__body > div > div:has(>div:not([style*='display: none;']))  .l-wizard-section__container"));
            egOpend = egOpend.slice(3);
            closeOpenArrows();
            // checking ajax request
            egFirst = false;
            closeActiveSection();

        }
        // header click detect
        live('.l-wizard-section__header', 'click', (e) => {
            if (e.target.classList.contains("l-wizard-section__header")) {
                let egContainer = e.target.parentElement.querySelector(".l-wizard-section__container");
                if (egContainer) {
                    egContainer.classList.toggle("eg-inactive-section");
                    egContainer.removeAttribute("style");
                    if (!egContainer.classList.contains("eg-inactive-section")) {
                        updateEgopend(egContainer, "unshift");
                        e.target.parentElement.scrollIntoView({ behavior: "smooth", block: "start" });
                    } else {
                        updateEgopend(egContainer, "shift");
                    }
                }
            } else if ((e.target.classList.contains("l-wizard-section__title")) || (e.target.classList.contains("l-wizard-section__icon"))) {
                e.target.parentElement.click();
            }
        });


        // order now button click
        live(['html body .c-product-card__btn',
            "html body .c-product-header__wizard-cta",
            "html body .c-sticky-nav__button"
        ], "click", function() {
            // console.log("order btn")
            egOpend = null;
            egFirst = true;
            waitForElement(".l-wizard__body > div > div:has(>div:not([style*='display: none;']))  .l-wizard-section__container", init, 50, 15000);
        });


        // edit btn click logic
        live('.c-wizard-summary__btn-edit', 'click', function() {
            if (this.classList.contains("c-wizard-summary__btn-edit")) {
                let egTargetTxt = this.parentElement.firstElementChild.innerText.toUpperCase().split(" ").shift();
                // searching section for this text
                document.querySelectorAll(".l-wizard-section").forEach(secTion => {
                    if (secTion.innerText.toUpperCase().indexOf(egTargetTxt) != -1) {
                        secTion.scrollIntoView({ behavior: "smooth", block: 'start' });

                        //========== EDIT BUTTON CLICK LOGIC ========//

                        /* so here i'm lopping through all the sections and getting their inner text
                        if inner text has the egTargetTxt then only we are scrolling to that section
                        and showing the container element inside of it */


                        if (secTion.querySelector(".eg-inactive-section")) {
                            updateEgopend(secTion.querySelector(".eg-inactive-section"), "unshift");
                            secTion.querySelector(".eg-inactive-section").classList.remove("eg-inactive-section");
                        }

                    }
                });
            }
        });

        function closeOpenArrows() {
            [...new Set(egOpend)].forEach(sec => {
                sec.classList.add("eg-inactive-section");
            });
            setTimeout(function(){
           egOpend = Array.from(document.querySelectorAll(".l-wizard__body > div > div:has(>div:not([style*='display: none;']))  .l-wizard-section__container"));                 
            },4000);
        }

        function updateEgopend(ele, t) {
            if (egOpend == null) {
                egOpend = [];
            }
            if (t == "shift") {
                egOpend.shift(ele);
            } else if (t == "unshift") {
                egOpend.unshift(ele);
            }
        }

        // check for ajax api if it is put request then close tab accordinglly
        function closeActiveSection() {
            const send = XMLHttpRequest.prototype.send;
            XMLHttpRequest.prototype.send = function() {
                this.addEventListener('load', function() {
                    console.log(this);
                    if (this.responseURL.indexOf("/api/wizard/") != -1) {
                        if ( egFirst == false) {
                            console.log("data updated in server");
                            // then perform your task
                          closeOpenArrows();
                            let egBlock = document.querySelector(".l-wizard__body > div > div:has(>div:not([style*='display: none;']) .l-wizard-section__icon:not(.is-active):not(.is-inactive)) .l-wizard-section__header");
                            egBlock && egBlock.click();
                        }
                    }
                });
                return send.apply(this, arguments);
            };

        }

        /* Initialize variation */
        waitForElement('html body .l-wizard__body', init, 50, 15000);

    } catch (e) {
        if (debug) console.log(e, "error in Test" + variation_name);
    }
})();

<style>
html {
    scroll-behavior: smooth;
}

#container-to-scroll > div:nth-child(2) > div > div:has(.l-wizard-section__container){
    cursor: pointer;
}

.eg-inactive-section{
    max-height: 0;
    overflow: hidden;
}

.l-wizard-section{
    padding-block: .8rem !important;
}


html body .l-wizard__body .l-wizard-section:not(#wizard-delivery) .l-wizard-section__action-button {
    display: none !important;
}

/*arrow up and down*/
html body .l-wizard-section__header {
    position: relative !important;
    padding-right: 3rem !important;
}

html body .l-wizard-section__header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border: solid #ED40A9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-100%);
    cursor: pointer;
}

.l-wizard-section__header:has(~.l-wizard-section__container:not(.eg-inactive-section))::after{
 transform:rotate(227deg);
}

/*hiding arrow if section has no content*/
.l-wizard-section:has(.l-wizard-section__header .is-inactive) .l-wizard-section__header::after{
    display:none !important;
    pointer-events: none !important;
}


@media(max-width: 767px){
    html body .l-wizard__body{
        padding-top: 20px !important;
    }
}
</style>