var BigCommerceArtifi = BigCommerceArtifi || {};
BigCommerceArtifi.isEventIsAlreadyRegistered = false;
/*Personalize Button Template use for personalizeButton*/
var personalizeButton = '<div style="display:inline-block;" id="" class="">';
personalizeButton += '<input value="{personalizeButtonLabel}" type="button" class="button button--primary" title="{personalizeButtonLabel}" onclick="BigCommerceArtifi.ProductPage.launchDesignerForVariant()">';
personalizeButton += '</div>';

var addtoCartButton = '<div style="display:inline-block;" id="artifiaddtocart" class="">';
addtoCartButton += '<input  value="Add to Cart" type="button" class="button button--primary"  onclick="">';
addtoCartButton += '</div>';
var cartPreviewAndEditButton = '<div style="margin-top:10px;">';
cartPreviewAndEditButton += '<a style="margin-right:5px;" href="#" title="Edit" onclick="BigCommerceArtifi.CartPage.editCartItem(event,\'{artifiDesignId}\',\'{extraQueryStringOption}\');return false;">Edit</a>';
cartPreviewAndEditButton += '|';
cartPreviewAndEditButton += '<a style="margin-left:5px;" href="#" title="Preview" onclick="BigCommerceArtifi.CartPage.previewCartItem(\'{artifiDesignId}\', \'{useProductCode}\'); return false;">Preview</a>';
cartPreviewAndEditButton += '</div>';
/* This target is use for adding above HTML */
var cartButtonContainerRef = ""

/*Change Option Container */
var changeButtonContainer = "";

/*Cart content Container */
var cartTableContainer = '.cart';

/*Artifi Design ID Regex*/
var regexArtifiDesignId = /Artifi\sDesign\sId/g;
var regexArtifiPDF = /Artifi\sPDF/g;
var regexArtifiXML = /Artifi\sXML/g;
var regexDesignIdPdfXml = /(Artifi\sDesign\sId|Artifi\sPDF|Artifi\sXML|Artifi\sPersonalized\sData|Artifi\sText\sPersonalization\sOption|Artifi\sImage\sPersonalization\sOption)/g;

/* Personalize Button Wrapper Container use for changing the wrapper container of personalize button*/
/* var personalizeButtonContainer = "#id" */
var personalizeButtonContainer = "#artifi-personalize-button-container";
/* Artifi Iframe Wrapper Id mentioned Here for avoide hardcoded on code. Right now we are refring the classing themae. If anyone have there id he can use add there Id in this parameter and mention in product view page.*/
/* var personalizeIframeContainer = "#id/.class" */
var personalizeIframeContainer = "";


/*Add to Cart selector BigC */
var addToCartSelector = "input#form-action-addToCart[type=submit]";

var editModeHTML = '<input type="hidden" name="item_id" value="{{cart-item-id}}">';

var isArtifiInitialize = false;

var checkoutPageName = "";
BigCommerceArtifi.Constants = {
    cartItemsCookieName: 'bigcommerce.artifi.connector.cartItems',
    customerCookieName: 'bigcommerce.artifi.connector.customer'
};

BigCommerceArtifi.Application = (function ($) {
    'use strict';

    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
        merchantId,
        websiteId,
        webApiClientKey,
        applicationHost,
        integrationUrl,
        frontUrl,
        integrationType,
        artifiBaseUrl;

    function init(config) {
        merchantId = config.merchantId;
        websiteId = decode(config.websiteId);
        webApiClientKey = decode(config.webApiClientKey);
        applicationHost = config.applicationHost;
        integrationUrl = config.integrationUrl;
        frontUrl = config.frontUrl;
        integrationType = config.integrationType;
        artifiBaseUrl = config.artifiBaseUrl;

        $(window)
            .ready(loadArtifiLibrary())
            .ready(loadCookieLibrary())
            .ready(initRequestsObserver());
    }

    function initRequestsObserver() {
        addMiniCartPopupHandler();
        var pattern = /\/cart.php?/g;
        function addXMLRequestCallback(callback) {
            var oldSend, i;
            if (XMLHttpRequest.callbacks) {
                // we've already overridden send() so just add the callback
                XMLHttpRequest.callbacks.push(callback);
            } else {
                // create a callback queue
                XMLHttpRequest.callbacks = [callback];
                // store the native send()
                oldSend = XMLHttpRequest.prototype.send;
                // override the native send()
                XMLHttpRequest.prototype.send = function () {
                    // process the callback queue
                    // the xhr instance is passed into each callback but seems pretty useless
                    // you can't tell what its destination is or call abort() without an error
                    // so only really good for logging that a request has happened
                    // I could be wrong, I hope so...
                    // EDIT: I suppose you could override the onreadystatechange handler though
                    if (XMLHttpRequest.callbacks != undefined) {
                        for (i = 0; i < XMLHttpRequest.callbacks.length; i++) {
                            XMLHttpRequest.callbacks[i](this);
                        }
                    }
                    // call the native send()                    
                    oldSend.apply(this, arguments);
                }
            }
        }
        addXMLRequestCallback(function (xhr) {
            xhr.addEventListener('load', function () {
                var result = pattern.exec(xhr.responseURL);
                if (result !== null) {
                    cartPageLoadEvents();
                }
            });
        });
    }

    function loadArtifiLibrary() {
        var script_cycle = document.createElement('script');

        script_cycle.setAttribute("type", "text/javascript");
        script_cycle.setAttribute("src", integrationUrl);
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_cycle);
    }

    function loadCookieLibrary() {
        var script_cycle = document.createElement('script');

        script_cycle.setAttribute("type", "text/javascript");
        script_cycle.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_cycle);
    }

    function getWebsiteId() {
        return websiteId;
    }

    function getIntegrationUrl() {
        return integrationUrl;
    }

    function getFrontUrl() {
        return frontUrl;
    }

    function getWebApiClientKey() {
        return webApiClientKey;
    }
    function getIntegrationType() {
        return integrationType;
    }
    function getArtifiBaseUrl() {
        return artifiBaseUrl;
    }
    function sendRequest(endpoint, method, payload, callback, callbackData, errorCallback) {
        $.ajax({
            type: method,
            url: applicationHost + endpoint,           
            async: true,
            data: payload,
            contentType: "application/json; charset=utf-8",  // ✅ Correct way to send JSON
            dataType: "json",              
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', merchantId);
            },
            success: function (response) {
                callback(response, callbackData);
            },
            error: function (response) {
                if (errorCallback) {
                    errorCallback(response, callbackData);
                }

            }
        });
    }

    function decode(input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length) {
            enc1 = keyStr.indexOf(input.charAt(i++));
            enc2 = keyStr.indexOf(input.charAt(i++));
            enc3 = keyStr.indexOf(input.charAt(i++));
            enc4 = keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
            output = output + String.fromCharCode(chr1);
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }

        return _utf8_decode(output);
    }

    function _utf8_decode(utftext) {
        var string = "";
        var i = 0;
        var c = 0, c2 = 0, c3 = 0;

        while (i < utftext.length) {
            c = utftext.charCodeAt(i);
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
        }

        return string;
    }

    function getBaseIntergrationValues() {
        var integrationValues = {};

        integrationValues.websiteId = getWebsiteId();
        integrationValues.webApiClientKey = getWebApiClientKey();
        integrationValues.divId = 'bigcommerce-artifi-iframe-container';

        return integrationValues;
    }

    function getUrlParameter(searchedParameterName) {
        var pageUrl = decodeURIComponent(window.location.search.substring(1)),
            variables = pageUrl.split('&'),
            parameterName,
            i;

        for (i = 0; i < variables.length; i++) {
            parameterName = variables[i].split('=');

            if (parameterName[0] === searchedParameterName) {
                return parameterName[1] === undefined ? true : parameterName[1];
            }
        }

        return false;
    }

    function generateUniqueIdentifier() {
        return guid4() + guid4() + '-' + guid4() + '-' + guid4() + '-' +
            guid4() + '-' + guid4() + guid4() + guid4();
    }

    function guid4() {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }

    function cartPageLoadEvents() {
        if (BigCommerceArtifi.ProductPage.updatePreviewPopup) {
            BigCommerceArtifi.ProductPage.updatePreviewPopup("");
        }
        if ($('#tempCartDiv').length) {
            $('#tempCartDiv').remove();
        }
        var div = $('<div id="tempCartDiv" style="display: none">');
        $("body").append(div);
        $("#tempCartDiv").load('/cart.php ' + cartTableContainer, function () {
            var cartItemRows = $(cartTableContainer).find('> tbody').find('> tr');
            if (BigCommerceArtifi.ProductPage.addToCartEventHandler) {
                BigCommerceArtifi.ProductPage.addToCartEventHandler(cartItemRows);
            }
        });
    };
    function addMiniCartPopupHandler() {
        if ($('[data-cart-preview]').is(':visible')) { //if the container is visible on the page
            $('[data-cart-preview]').on("click", updateMiniCartPopupThumbnail);
            clearTimeout();
        } else {
            setTimeout(addMiniCartPopupHandler, 50); //wait 50 ms, then try again
        }
    };
    function updateMiniCartPopupThumbnail() {
        if ($('[data-preview-design-id]').is(':visible')) {
            $('[data-preview-design-id]').each(function (key, val) {
                var imageParent = $(this);
                var designId = $(this).attr('data-preview-design-id').trim();
                if (designId > 0) {
                    var image = new Image();
                    image.src = BigCommerceArtifi.Application.getPreviewImageURL(designId);
                    image.onload = function () {
                        var miniCartImage = imageParent.find('img');
                        var width = miniCartImage.width();
                        var height = miniCartImage.height();
                        miniCartImage.attr('srcset', image.src);//.attr('src', image.src);//.attr('data-srcset', image.src);
                        miniCartImage.width(width);
                        miniCartImage.height(height);
                    };
                }
            });
            clearTimeout();
        } else {
            setTimeout(updateMiniCartPopupThumbnail, 50); //wait 50 ms, then try again
        }
    };

    function setPersonalizationButton() {

        //GET Product ID Array
        let productId = []; $('[data-art-selector="btn-personalise"]').each((index, element) => {
            productId.push($(element).attr('data-product-id'));
        });
        //GET Product SKU Array
        let productSKU = []; $('[data-art-selector="btn-personalise"]').each((index, element) => {
            productSKU.push($(element).attr('data-product-sku'));
        });
        if (productId.length && productSKU.length) {

            BigCommerceArtifi.Application.sendRequest(
                'products/isPersonalizationEnabled',
                'GET',
                { productId: productId, productSKU: productSKU },
                function (data) {
                    if (data.length) {
                        for (var index = 0; index < data.length; index++) {
                            if (data[index]) {
                                $('[data-art-selector="btn-personalise"][data-product-sku="' + productSKU[index] + '"]').show();//hide perosnalization button if Personalization is not set
                            }
                        }
                    }
                }
            );
        }

    };
    function isCustomizedProduct(productId, productSKU, callback) {
        let productIds = [];
        let productSKUs = [];

        if (productId && productSKU) {
            productIds.push(productId.toString());
            productSKUs.push(productSKU.toString());

            if (productIds.length && productSKUs.length) {
                try {
                    BigCommerceArtifi.Application.sendRequest(
                        '/products/isPersonalizationEnabled',
                        'GET',
                        { productId: productIds, productSKU: productSKUs },
                        function (data) {
                            if (data && data.length > 0 && data[0]) {
                                callback(true);
                            }
                            else {
                                callback(false);
                            }
                        },
                        function (error) {
                            console.log(error);
                            callback(false);
                        }
                    );
                } catch (error) {
                    callback(false);
                }
            } else {
                callback(false);
            }
        } else {
            callback(false);
        }
    }
    function getPreviewImageURL(designID, isThumbnail = true) {
        if (!isNaN(parseInt(designID))) {
            var randomString = Math.random().toString(36).substring(7);
            var PreviewUrl = 'websiteId=' + BigCommerceArtifi.Application.getWebsiteId() +
                '&webApiClientKey=' + BigCommerceArtifi.Application.getWebApiClientKey() +
                '&customizedProductId=' + designID +
                '&isthumbnail=' + isThumbnail + '&cache=' + randomString;
            var pathArray = BigCommerceArtifi.Application.getIntegrationUrl().split('/');
            var url = getArtifiBaseUrl();
            return url + "/Designer/Services/GetPreviewImage?personalization=" + btoa(PreviewUrl);
        }
    };
    function getPDFUrl(designID) {
        if (!isNaN(parseInt(designID))) {
            var parameters = 'websiteId=' + BigCommerceArtifi.Application.getWebsiteId() +
                '&webApiClientKey=' + BigCommerceArtifi.Application.getWebApiClientKey() +
                '&customizedProductId=' + designID;
            var url = getFrontUrl();
            //return url + "/Designer/Services/DownloadOutputFiles?personalization=" + btoa(parameters);
            return applicationHost.replace('api', 'pdf')+ designID;
        }
        return "error";
    };
    function getXMLUrl(designID) {
        if (!isNaN(parseInt(designID))) {
            var parameters = 'websiteId=' + BigCommerceArtifi.Application.getWebsiteId() +
                '&webApiClientKey=' + BigCommerceArtifi.Application.getWebApiClientKey() +
                '&customizedProductId=' + designID;
            var url = getFrontUrl();
            //return url + "/Designer/Services/RegenerateXMLFile?personalization=" + btoa(parameters);
            return applicationHost.replace('api', 'xml')+ designID;
        }
        return "error";
    };

    function updateCheckoutPage() {
        var productListItems = $('.productList-item');
        if (productListItems.is(':visible')) { //if the container is visible on the page                    
            productListItems.each(function (element) {
                updateCheckoutDesigns($(this));
            });
            $('.productList').on('DOMNodeInserted', 'li', function (e) {
                updateCheckoutDesigns($(e.currentTarget));
            });
            clearTimeout();
        } else {
            setTimeout(updateCheckoutPage, 50); //wait 50 ms, then try again
        }
    };

    function updateCheckoutDesigns(element) {
        var ProductOptions = $(element).find('[data-test="cart-item-product-option"]');
        var pattern = regexArtifiDesignId;
        var pdfXmlRegex = regexDesignIdPdfXml;
        ProductOptions.each(function () {
            var label = $(this).html();
            var result = pattern.exec(label);
            var isPDFLinkPresent = pdfXmlRegex.exec(label);
            if (result !== null) {
                var designId = label.replace(/[^\d.]/g, '');
                var image = new Image();
                image.src = BigCommerceArtifi.Application.getPreviewImageURL(designId.trim());
                image.onload = function () {
                    var checkoutCartImage = $(element).find('img[data-test="cart-item-image"]');
                    checkoutCartImage.attr('src', image.src);
                };
                if (checkoutPageName == 'orderconfirmation') {
                    UpdateCheckoutStatus(designId, merchantId);
                }
                $(this).hide();
            };
            if (isPDFLinkPresent != null) {
                $(this).hide();
            }
            pattern.lastIndex = 0;
            pdfXmlRegex.lastIndex = 0;
        });
    }

    return {
        init: function (config) {
            return init(config);
        },
        sendRequest: function (endpoint, method, payload, callback, callbackData, errorCallback) {
            return sendRequest(endpoint, method, payload, callback, callbackData, errorCallback);
        },
        getWebsiteId: function () {
            return getWebsiteId();
        },
        getWebApiClientKey: function () {
            return getWebApiClientKey();
        },
        getIntegrationUrl: function () {
            return getIntegrationUrl();
        },
        getFrontUrl: function () {
            return getFrontUrl();
        },
        getBaseIntergrationValues: function () {
            return getBaseIntergrationValues();
        },
        getUrlParameter: function (searchedParameterName) {
            return getUrlParameter(searchedParameterName);
        },
        generateUniqueIdentifier: function () {
            return generateUniqueIdentifier();
        },
        setPersonalizationButton: function () {
            return setPersonalizationButton();
        },
        getPreviewImageURL: function (designID, IsThumbnail) {
            return getPreviewImageURL(designID, IsThumbnail);
        },
        getPDFUrl: function (designID) {
            return getPDFUrl(designID);
        },
        getXMLUrl: function (designID) {
            return getXMLUrl(designID);
        },
        updateCheckoutPage: function (pageName) {
            checkoutPageName = pageName;
            return updateCheckoutPage();
        },
        getIntegrationType: function () {
            return getIntegrationType();
        },
        getArtifiBaseUrl: function () {
            return getArtifiBaseUrl();
        },
        isCustomizedProduct: function (productId, productSKU, callback) {
            isCustomizedProduct(productId, productSKU, callback);
        },
    };
})(window.jQuery);

BigCommerceArtifi.Customer = (function ($) {
    'use strict';

    var customerEmail,
        customerId,
        bigcommerceCustomerId,
        sessionId,
        fetchingInProgress = false;

    function init(email) {
        $(window).ready(handleCustomerLogout());

        var interval = setInterval(function () {
            if (typeof Cookies !== 'undefined') {
                clearInterval(interval);

                $(window)
                    .ready(fetchCustomer(email, handleCustomerInitResponse));
            }
        }, 100);
    }

    function handleCustomerInitResponse(email, response) {
        customerId = response.customerId;
        bigcommerceCustomerId = response.bigCommerceCustomerId;

        var customer = {};
        customer.email = email;
        customer.customerId = customerId;
        customer.bigCommerceCustomerId = bigcommerceCustomerId;

        Cookies.set(BigCommerceArtifi.Constants.customerCookieName, JSON.stringify(customer));

        BigCommerceArtifi.Customer.setFetchingInProgress(false);
    }

    function setFetchingInProgress(flag) {
        fetchingInProgress = flag;
    }

    function fetchCustomer(email, callback) {
        var interval = setInterval(function () {
            if (typeof Cookies !== 'undefined' && fetchingInProgress !== true) {
                clearInterval(interval);

                fetchingInProgress = true;

                var customer = Cookies.get(BigCommerceArtifi.Constants.customerCookieName);
                if (customer) {
                    customer = JSON.parse(customer);
                }

                if (customer && (!email || email === customer.email)) {
                    return callback(customer.email, customer);
                }

                if (!email) {
                    email = BigCommerceArtifi.Application.generateUniqueIdentifier();
                }

                var endpoint = 'customer?email=' + email,
                    method = 'GET',
                    payload = '';
                var headers = {}; // ✅ Declare before usage

                if (customer) {
                    endpoint = 'customer?customerId=' + customer.customerId;
                    method = 'PUT';
                    payload = JSON.stringify({ 'email': email });
                }

                BigCommerceArtifi.Application.sendRequest(
                    endpoint,
                    method,
                    payload,
                    function (response) {
                        callback(email, response);
                    },
                    headers // 🔹 pass headers to sendRequest
                );
            }
        }, 100);
    }

    // Fetch and update customer data using email and manage customer ID
    function fetchAndUpdateCustomerData(email, callback) {
        // Load js-cookie if not already available
        if (typeof Cookies === 'undefined' || Cookies === null) {
            var script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js';
            script.onload = function () {
                initializeCustomerDataFlow();
            };
            (document.head || document.documentElement).appendChild(script);
        } else {
            initializeCustomerDataFlow();
        }

        function initializeCustomerDataFlow() {
            var customer = Cookies.get(BigCommerceArtifi.Constants.customerCookieName);
            if (customer) {
                customer = JSON.parse(customer);
            }

            if (customer && (!email || email === customer.email)) {
                setCustomerId(customer.email, customer);
                return callback(customer.email, customer);
            }

            if (!email) {
                email = BigCommerceArtifi.Application.generateUniqueIdentifier();
            }

            var endpoint = 'customer?email=' + email,
                method = 'GET',
                payload = '';

            if (customer) {
                endpoint = 'customer?customerId=' + customer.customerId;
                method = 'PUT';
                payload = JSON.stringify({ 'email': email });
            }

            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                method,
                payload,                  
                function (response) {
                    setCustomerId(email, response);
                    callback(email, response);
                }
            );
        }
    }


    // Store customer data on cookies and set customer ID
    function setCustomerId(email, response) {
        customerId = response.customerId;
        bigcommerceCustomerId = response.bigCommerceCustomerId;

        var customer = {};
        customer.email = email;
        customer.customerId = customerId;
        customer.bigCommerceCustomerId = bigcommerceCustomerId;

        Cookies.set(BigCommerceArtifi.Constants.customerCookieName, JSON.stringify(customer));

    }
    function handleCustomerLogout() {
        var attempt = 1,
            interval = setInterval(function() {
                var linksCollection = $('a'),
                    pattern = /\/login.php\?action=logout/g;
                linksCollection.each(function (index, element) {
                    var linkObject = $(element),
                        hrefValue = linkObject.attr('href');

                    if (!hrefValue) {
                        // Continue to next iteration.
                        return true;
                    }

                    var result = pattern.exec(hrefValue);
                    if (result !== null) {
                        linkObject.on('click', function () {
                            window.console.log('removing cookie');
                            Cookies.remove(BigCommerceArtifi.Constants.customerCookieName);
                        });
                        clearInterval(interval);
                    }
                });

                if (attempt >= 3) {
                    clearInterval(interval);
                }

                attempt += 1;
            }, 100);
    }

    function getCustomerEmail() {
        return customerEmail;
    }

    function getCustomerId() {
        return customerId;
    }

    function getBigcommerceCustomerId() {
        return bigcommerceCustomerId;
    }

    return {
        init: function (email) {
            return init(email);
        },
        fetchCustomer: function (email, callback) {
            return fetchCustomer(email, callback);
        },
        getCustomerEmail: function () {
            return getCustomerEmail();
        },
        getCustomerId: function () {
            return getCustomerId();
        },
        getBigcommerceCustomerId: function () {
            return getBigcommerceCustomerId();
        },
        setFetchingInProgress: function (flag) {
            return setFetchingInProgress(flag);
        },
        fetchAndUpdateCustomerData: function (email, callback) {
            return fetchAndUpdateCustomerData(email, callback);
        }
    };
})(window.jQuery);

BigCommerceArtifi.ProductPage = (function ($) {
    'use strict';

    var productId,
        customerEmail,
        productSku,
        productOptions,
        initResponse,
        artifiReactAddToCartEventObject,
        artifiAddToCartEventObject,
        extraQueryStringOption;

    function init(config) {
        productId = config.productId;
        customerEmail = config.customerEmail;
        var extraQueryString = config.extraQueryString ? config.extraQueryString : "";
        extraQueryStringOption = extraQueryString;

        var designId = config.artifiDesignId ? config.artifiDesignId : "";
        $(window)
            .ready(checkIfProductIsCustomizable(extraQueryString, designId))
            .ready(hideArtifiDesignIdPdfXmlFields());
    }

    /**This Function is Used to Hide Artifi Design Id, Artifi PDF and Artifi Xml Fileds on PDP page using "regexDesignIdPdfXml" regex
     */
    function hideArtifiDesignIdPdfXmlFields() {
        var pattern = regexDesignIdPdfXml;
        $('#bigCommerceAddToCartForm').find('label').each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                var field = $(this).siblings('input');
                if (field.length === 1) {
                    $(field).val(0)
                        .hide();
                    $('label[for="' + field.attr('id') + '"]').hide();
                    $(field).siblings('label').hide();
                }
            }
            pattern.lastIndex = 0;
        });
    }

    function getArtifiDesignIdFieldObj() {
        var fieldObj = false,
            pattern = /Artifi\sDesign\sId/g;

        $('#bigCommerceAddToCartForm').find('label').each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                var fieldContainer = $(this).siblings('input');
                if (fieldContainer.length === 1) {
                    fieldObj = fieldContainer;
                }
            }
        });

        return fieldObj;
    }

    /**
     * The function returns the 'textarea' element if found, or 'false' if not.
     * @returns
     */
    function getArtifiPersonalizedDataFieldObj() {
        var fieldObj = false,
            pattern = /Artifi\sPersonalized\sData/g;

        // First attempt: Check for label
        $('#bigCommerceAddToCartForm').find('label').each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                var fieldContainer = $(this).siblings('textarea');
                if (fieldContainer.length === 1) {
                    fieldObj = fieldContainer;
                }
            }
        });

        // Second attempt: Check for data-label-name attribute if label not found
        if (fieldObj === false) {
            $('#bigCommerceAddToCartForm').find('div[data-label-name="artifi-personalized-data"]').each(function () {
                var fieldContainer = $(this).find('textarea');
                if (fieldContainer.length === 1) {
                    fieldObj = fieldContainer;
                }
            });
        }

        return fieldObj;
    }

    /**
     * This Function returns "input" DOM object as per matching label from input "regex" else false if not found
     * @param {any} regex
     */
    function getFieldObjByRegex(regex) {
        var fieldObj = false,
            pattern = regex;
        $('#bigCommerceAddToCartForm').find('label').each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                var fieldContainer = $(this).siblings('input');
                if (fieldContainer.length === 1) {
                    fieldObj = fieldContainer;
                }
            }
            pattern.lastIndex = 0;
        });
        return fieldObj;
    }

    function addToCartEventHandler(cartItemRows) {       
        var cartItems = Cookies.get(BigCommerceArtifi.Constants.cartItemsCookieName);
        var endpoint = 'cart';
        if (cartItems) {
            cartItems = JSON.parse(cartItems);
        } else {
            cartItems = [];
        }

        cartItemRows.each(function (key, val) {
            var row = $(this),
                cartItemId = row.attr('data-cart-item-id'),
                productId = row.attr('data-product-id'),
                productSku = row.attr('data-product-sku');


            if (cartItems.indexOf(cartItemId) > -1) {
                // Continue to next iteration.
                return true;
            }

            cartItems.push(cartItemId);

            if (!artifiAddToCartEventObject) {
                return false;
            }
            if (!artifiAddToCartEventObject.data) {
                return false;
            }

            var artifiProductSku = artifiAddToCartEventObject.data.sku;
            if (artifiProductSku.toLowerCase() !== productSku.toLowerCase()) {
                return true;
            }               
            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                'POST',
                JSON.stringify({
                    'productId': productId,
                    'cartItemId': cartItemId,
                    'designId': artifiAddToCartEventObject.data.custmizeProductId,
                    'previewUrl': artifiAddToCartEventObject.data.savedDesignStandardImages[0],
                    'customerId': BigCommerceArtifi.Customer.getCustomerId()
                }),
                BigCommerceAddToCartSuccessHdl
            );
            // Break each loop.
            return false;
        });
        Cookies.set(BigCommerceArtifi.Constants.cartItemsCookieName, JSON.stringify(cartItems));
    }

    function BigCommerceAddToCartSuccessHdl() {
        var sku = $('.productView').find('[data-product-sku]').text().trim();
        isArtifiInitialize = false;
        insertArtifiDesigner(initResponse.ProductSku, sku, extraQueryStringOption);
        var field = getArtifiDesignIdFieldObj();
        $(field).val(0);
        var fieldPDF = getFieldObjByRegex(regexArtifiPDF);
        var fieldXML = getFieldObjByRegex(regexArtifiXML);
        $(fieldPDF).val(0);
        $(fieldXML).val(0);
        artifiAddToCartEventObject = null;
        artifiReactAddToCartEventObject = null;
    }

    function updatePreviewPopup(previewUrl) {
        if (!previewUrl) {
            if (artifiAddToCartEventObject && artifiAddToCartEventObject.data) {
                previewUrl = artifiAddToCartEventObject.data.savedDesignStandardImages[0];
            } else {
                return false;
            }
        }

        //HideArtifiDesignID,PDF&XML fields
        var labelsCollectionSelector = $('.previewCart')
            .find('.productView-details')
            .find('.productView-info-name'),
            pattern = regexDesignIdPdfXml;
        labelsCollectionSelector.each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                $(this)
                    .next('dd')
                    .hide();
                $(this)
                    .hide();
            }
            pattern.lastIndex = 0;
        });
        //replace Preview Thumbnail
        var imageElement = $('.previewCart').find('.productView-img-container');
        var image = new Image();
        image.src = previewUrl;
        image.onload = function () {
            imageElement
                .find('img')
                .attr('src', previewUrl)
                .attr('srcset', previewUrl)
        };
    }

    /**
     * This function checks if a product is customizable by making a request to a specific endpoint.
     * @param {any} extraQueryString
     * @param {any} designId
     */
    function checkIfProductIsCustomizable(extraQueryString, designId) {
        if (productId) {
            var endpoint = 'products/' + productId + '/iscustomized';
            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                'GET',
                '',
                function (response) {
                    prepareToInitArtifiDesigner(response, extraQueryString, designId);
                },
                '',
                showAddToCartButton
            );
        }
    }

    /**
     * Prepares to initialize the Artifi Designer by first fetching customer details.
     * Fetches customer data using the 'customerEmail'. Once the customer data is fetched,
     * it calls 'initArtifiDesigner' with the response, additional query string, and design ID.
     * @param {any} response
     * @param {any} extraQueryString
     * @param {any} designId
     */
    function prepareToInitArtifiDesigner(response, extraQueryString, designId) {
        BigCommerceArtifi.Customer.fetchAndUpdateCustomerData(customerEmail, function (customer) {
            initArtifiDesigner(response, extraQueryString, designId);
        });
    }

    function showAddToCartButton() {
        $(addToCartSelector).show();
    }

    function registerArtifiEventHandler() {
        if (window.addEventListener) {
            addEventListener("message", receiveMessage, false);
        } else {
            attachEvent("onmessage", receiveMessage);
        }
    }

    window.addEventListener("artifi-initialized", function (e) {
        console.log("artifi-initialized", e.detail.data
        );
    });
    window.addEventListener("artifi-add-to-cart-success", function (e) {
        console.log("artifi-add-to-cart-success", e.detail.data
        );
        reactArtifiAddToCartEventHandler(JSON.parse(e.detail.data));
    });

    /**
     * Handles the Artifi "Add to Cart" event by setting up necessary fields and managing cart actions.
     * Sets the event data, retrieves and updates various input fields with customization details (Design ID, PDF URL, XML URL, and personalized data).
     * If in edit mode, it checks the cart for the existing item, removes it, and re-adds the updated item to the cart.
     * If not in edit mode, it directly adds the customized product to the cart.
     * @param {any} artifiReactEventData
     */
    function reactArtifiAddToCartEventHandler(artifiReactEventData) {
        artifiReactAddToCartEventObject = artifiReactEventData;
        var customizedId = artifiReactEventData.designId;
        var field = getArtifiDesignIdFieldObj();//Get input DOM objects
        var fieldPDF = getFieldObjByRegex(regexArtifiPDF);
        var fieldXML = getFieldObjByRegex(regexArtifiXML);
        var personalizedDataField = getArtifiPersonalizedDataFieldObj();
        if(field)
        {
            $(field).val(customizedId);
        }
        if (fieldPDF)
        {
            $(fieldPDF).val(BigCommerceArtifi.Application.getPDFUrl(customizedId)); // Insert PDF Link
        }
        if (fieldXML)
        {
            $(fieldXML).val(BigCommerceArtifi.Application.getXMLUrl(customizedId)); // Insert XML Link
        }
        if (personalizedDataField)
        {
            $(personalizedDataField).val(JSON.stringify(artifiReactEventData));
        }

        var designId = isInEditMode();
        if (designId) {
            function handleCart(cart) {
                var cartId = cart.id;
                var cartItemId = BigCommerceArtifi.Application.getUrlParameter('cartItemId');
                var quantityInput = document.querySelector(`input#qty-${cartItemId}`);
                var quantity = quantityInput ? parseInt(quantityInput.value) : 1;

                var existingItem = cart.lineItems.physicalItems.find(item => item.id === cartItemId);
                if (!existingItem)
                {
                    existingItem =  cart.lineItems.digitalItems.find(item => item.id === cartItemId);
                }

                if (existingItem) {
                    // Remove the specific item from the cart
                    $.ajax({
                        type: 'DELETE',
                        url: `/api/storefront/carts/${cartId}/items/${existingItem.id}`,
                        contentType: 'application/json',
                        success: function (response) {
                            console.log('Cart item deleted successfully:', response);

                            // Re-add the updated product to the cart
                            BigCommerceArtifi.Application.sendRequest(
                                'cart',
                                'POST',
                                JSON.stringify({
                                    'productId': productId,
                                    'designId': artifiReactEventData.designId,
                                    'previewUrl': artifiReactEventData.previewUrl,
                                    'customerId': BigCommerceArtifi.Customer.getCustomerId()
                                }),
                                BigCommerceAddToCartSuccessHdl
                            );
                            $(addToCartSelector).trigger('click');
                        },
                        error: function (xhr, status, error) {
                            console.error('Error deleting cart item:', status, error);
                            console.error('Response:', xhr.responseText);
                        }
                    });
                }
            }

            function getCartId(callback) {
                fetch('/api/storefront/cart', {
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.length > 0) {
                            callback(data[0]);
                        } else {
                            console.error('No cart found');
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching cart:', error);
                    });
            }

            getCartId(handleCart);
        } else {
            var endpoint = 'cart';
            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                'POST',
                JSON.stringify({
                    'productId': productId,
                    'designId': artifiReactEventData.designId,
                    'previewUrl': artifiReactEventData.previewUrl,
                    'customerId': BigCommerceArtifi.Customer.getCustomerId()
                }),
                BigCommerceAddToCartSuccessHdl
            );
            $(addToCartSelector).trigger('click');
        }
    }
    function receiveMessage(eventObject) {
        if (eventObject === null || typeof eventObject !== 'object') {
            return false;
        }

        var eventData = {};

        try {
            eventData = JSON.parse(eventObject.data);
        } catch (e) {
            return false;
        }

        switch (eventData.action) {
            case 'add-to-cart':
                artifiAddToCartEventHandler(eventData);
                break;
            case 'sku-changed':
                artifiSkuChangedEventHandler(eventData);
                break;
        }
    }

    function artifiAddToCartEventHandler(eventData) {
        artifiAddToCartEventObject = eventData;
        var customizedId = artifiAddToCartEventObject.data.custmizeProductId;
        var field = getArtifiDesignIdFieldObj();//Get input DOM objects
        var fieldPDF = getFieldObjByRegex(regexArtifiPDF);
        var fieldXML = getFieldObjByRegex(regexArtifiXML);
        $(field).val(customizedId);//Insert Artifi Design ID
        $(fieldPDF).val(BigCommerceArtifi.Application.getPDFUrl(customizedId));//Insert PDF Link
        $(fieldXML).val(BigCommerceArtifi.Application.getXMLUrl(customizedId));//Insert XML Link

        var designId = isInEditMode();
        // if (isNaN(designId)) {
        // designId = eventData.data.custmizeProductId;
        // }
        if (designId) {
            var endpoint = 'cart';
            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                'PUT',
                JSON.stringify({
                    'designId': artifiAddToCartEventObject.data.custmizeProductId,
                    'previewUrl': artifiAddToCartEventObject.data.savedDesignStandardImages[0],
                    'customerId': BigCommerceArtifi.Customer.getCustomerId()
                }),
                function () {

                    var cartItemId = BigCommerceArtifi.Application.getUrlParameter('cart-item-id');
                    $('#SH-ProductOption input[name="action"]').val("EditProductFieldsInCart")
                    editModeHTML = editModeHTML.replace("{{cart-item-id}}", cartItemId)
                    $("#SH-ProductOption").append(editModeHTML);
                    var data = $("#SH-ProductOption").serializeArray();

                    $.post('/cart.php', data).done(function () {
                        document.location.href = '/cart.php';
                    });


                }
            );

        } else {
            toggleArtifiDesigner();
            var endpoint = 'cart';
            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                'POST',
                JSON.stringify({
                    'productId': productId,
                    'designId': artifiAddToCartEventObject.data.custmizeProductId,
                    'previewUrl': artifiAddToCartEventObject.data.previewUrl,
                    'customerId': BigCommerceArtifi.Customer.getCustomerId()
                }),
                BigCommerceAddToCartSuccessHdl
            );
            $(addToCartSelector).trigger('click');
        }
    }

    /**
 * This changes only for SSW (APD-22831). This code will reframe in future.
 * @param {any} eventData
 * @returns
 */
    function artifiSkuChangedEventHandler(eventData) {
        var newSku = eventData.data.sku;

        if (!productOptions || productOptions === null) {
            productOptions = [];
        }

        if (!productOptions[newSku]) {
            return false;
        }
        /* THis will change According to the Client*/
        $.each(productOptions[newSku], function (index, sku) {
            if (!BigCommerceArtifi.isEventIsAlreadyRegistered) {
                $(document).find('.productView-details  input[type="radio"]').bind("change", function (e) { getSelectedSkuByOptionId(this.value) });
                $(document).find('#ProductDetails .productOptionPickListSwatch input[type="radio"], .productOptionPickListDropDown select').bind("change", function (e) { getSelectedSkuByOptionId(this.value) });
                $(document).find('#ProductDetails .productOptionPickListSwatch input[type="radio"], .productOptionPickListDropDown select').bind("change", function (e) { getSelectedSkuByOptionId(this.value) });

                BigCommerceArtifi.isEventIsAlreadyRegistered = true;
            }

            $("#ProductDetails .form-field , #bigCommerceAddToCartForm .form-field").each(function (key) {
                var listOfselectedComb = {}
                var parent = sku.option_id;
                var val = sku.id;


                if ($(this).is('[data-product-attribute="swatch"]')) {
                    if (!$(this).find('input#attribute_swatch_' + parent + '_' + val + '[value="' + val + '"]').is(':checked')) {
                        $(this).find('input#attribute_swatch_' + parent + '_' + val + '[value="' + val + '"]').click();
                    }
                }


                if ($(this).is('[data-product-attribute="set-select"]')) {
                    if ($(this).find('select option[data-product-attribute-value="' + parent + '"][value="' + val + '"]').attr("selected", "selected")) {
                        $(this).find('select option[data-product-attribute-value="' + parent + '"][value="' + val + '"]').click();
                    }
                }
                if ($(this).is('[data-product-attribute="set-rectangle"]')) {
                    if (!$(this).find('input#attribute_rectangle_' + parent + '_' + val + '[name="attribute[' + parent + ']"][value="' + val + '"]').is(':checked')) {
                        $(this).find('input#attribute_rectangle_' + parent + '_' + val + '[name="attribute[' + parent + ']"][value="' + val + '"]').click();
                    }
                }

                if ($(this).is('[data-product-attribute="set-radio"]')) {
                    if (!$(this).find('input#attribute_radio__' + parent + '_' + val + '[value="' + val + '"]').is(':checked')) {
                        $(this).find('input#attribute_radio_' + parent + '_' + val + '[value="' + val + '"]').click();
                    }
                }
            })
        });
    }

    /**
     * Adds the "sku-changed" event handler.
     */
    function attachArtifiSkuChangedEventHandler() {
        if (!BigCommerceArtifi.isEventIsAlreadyRegistered) {
            window.addEventListener("sku-changed", artifiSkuChangedEventHandler, false);
            BigCommerceArtifi.isEventIsAlreadyRegistered = true;
        }
    }

    /**
 * Removes the "sku-changed" event handler.
 */
    function detachArtifiSkuChangedEventHandler() {
        if (BigCommerceArtifi.isEventIsAlreadyRegistered) {
            window.removeEventListener("sku-changed", artifiSkuChangedEventHandler, false);
            BigCommerceArtifi.isEventIsAlreadyRegistered = false;
        }
    }
    function getSelectedSkuByOptionId(optionId) {
        var selectedCombination = getSelectedOptionArray();
        var isValidDetails = false;
        var selectedSku;
        $.each(productOptions, function (key, value) {

            for (var i = 0; i < value.length; i++) {
                if (getOptionValue(value[i].product_option_id, selectedCombination) == value[i].option_value_id) {
                    isValidDetails = true;
                } else {

                    isValidDetails = false;
                    break;
                }

            }
            if (value.length != selectedCombination.length) {
                isValidDetails = false;
            }
            if (isValidDetails) {

                selectedSku = key
            }
        });

        initArtifiDesignerBySku(selectedSku);
    }

    function getOptionValue(product_option_id, selectedCombination) {
        if (selectedCombination) {
            for (var j = 0; j < selectedCombination.length; j++) {
                if (selectedCombination[j].product_option_id == product_option_id) {
                    return selectedCombination[j].option_value_id
                    break;
                }
            }
        }
        return 0;
    }
    /*
    Function for getting list of selected cobination
    */
    function getSelectedOptionArray() {
        var selectedCombination = [];
        $("#bigCommerceAddToCartForm .form-field").each(function (key, val) {
            var listOfselectedComb = {}
            if ($(this).is('[data-product-attribute="swatch"]')) {
                var parent = $(this).attr("data-art-parent");
                var val = $(this).find('input[data-attr-parent="' + parent + '"]:checked').val()
                listOfselectedComb["product_option_id"] = parent;
                listOfselectedComb["option_value_id"] = val;
                selectedCombination.push(listOfselectedComb)
            }
            if ($(this).is('[data-product-attribute="set-select"]')) {
                var parent = $(this).attr("data-art-parent");
                var val = $(this).find('select option[data-attr-parent="' + parent + '"]:selected').val()
                listOfselectedComb["product_option_id"] = parent;
                listOfselectedComb["option_value_id"] = val;
                selectedCombination.push(listOfselectedComb)
            }
            if ($(this).is('[data-product-attribute="set-rectangle"]')) {
                var parent = parseInt($(this).find('input:checked').attr("name").match(/\d+/));
                var val = $(this).find('input:checked').val();
                listOfselectedComb["product_option_id"] = parent;
                listOfselectedComb["option_value_id"] = val;
                selectedCombination.push(listOfselectedComb)
            }





        })
        return selectedCombination;

    }

    function compareTwoObj(obj1, obj2) {
        //Loop through properties in object 1
        for (var p in obj1) {
            //Check property exists on both objects
            if (obj1.hasOwnProperty(p) !== obj2.hasOwnProperty(p)) return false;

            switch (typeof (obj1[p])) {
                //Deep compare objects
                case 'object':
                    if (!compareTwoObj(obj1[p], obj2[p])) return false;
                    break;
                //Compare function code
                case 'function':
                    if (typeof (obj2[p]) == 'undefined' || (p != 'compare' && obj1[p].toString() != obj2[p].toString())) return false;
                    break;
                //Compare values
                default:
                    if (obj1[p] != obj2[p]) return false;
            }
        }

        //Check object 2 for any extra properties
        for (var p in obj2) {
            if (typeof (obj1[p]) == 'undefined') return false;
        }
        return true;
    };

    function initArtifiDesignerBySku(selectedskU) {
        insertArtifiDesigner('', selectedskU);
    }

    function fetchProductOptions(callback) {
        var endpoint = 'products/' + productId + '/skus';
        BigCommerceArtifi.Application.sendRequest(
            endpoint,
            'GET',
            '',
            function (response) {
                productOptions = response;
                callback();
            }
        );
    }

    /**
     * Initializes Artifi Designer based on response:
     * - If response.Result is 1:
     *    - Sets initResponse and productSku.
     *    - Handles integrationType:
     *      - 'false' (iframe): Inserts customize button and Artifi designer.
     *      - 'true' (React): Hides product images, adds customize button, and initializes Artifi.
     * @param {any} response
     * @param {any} extraQueryString
     * @param {any} designId
     */
    function initArtifiDesigner(response, extraQueryString, designId) {
        if (response.Result === 1) {
            initResponse = response;
            productSku = response.ProductSku;
            var sku = $('.productView').find('[data-product-sku]').text().trim();
            var integrationType = BigCommerceArtifi.Application.getIntegrationType();
            if (integrationType && integrationType.toLowerCase() == 'false') {
                if (!sku && !response.IsSimple)
                    sku = editModeSKU();
                fetchProductOptions(function () {
                    insertCustomizeButton(initResponse.CustomizedButtonLabel, initResponse.IsOptional, initResponse.ProductSku, extraQueryString);
                    const event = new CustomEvent('artifi-customize-button-inserted');
                    document.dispatchEvent(event);
                });
            }
            else if (integrationType && integrationType.toLowerCase() == 'true') {
                $('.productView').find('.productView-images').css('display', 'none');
                $(personalizeButtonContainer).append(addtoCartButton);
                $('#form-action-addToCart').hide();
                initializeArtifi(sku, designId);
                var button = document.getElementById('artifiaddtocart');
                button.addEventListener('click', function () {

                    Artifi.addToCart();
                });
            }
            registerArtifiEventHandler();
        } else {
            showAddToCartButton();
        }

        BigCommerceArtifi.Customer.setFetchingInProgress(false);
    }

    window.addEventListener("artifi-initialized", function (e) {
        console.log("artifi-initialized", e.detail.data
        );
    });
    function toggleArtifiDesigner(designId) {
        var integrationType = BigCommerceArtifi.Application.getIntegrationType();
        if (integrationType && integrationType.toLowerCase() == 'false') {
            if (designId && $('#bigcommerce-artifi-iframe-container').is(":visible")) {
                document.location.href = '/cart.php';
            }
            window.scrollTo(0, 50);
            $('#bigcommerce-artifi-iframe-container').toggle();

            if ($('#bigcommerce-artifi-iframe-container').css('visibility') == 'hidden') {
                $('#bigcommerce-artifi-iframe-container').css('visibility', 'visible');
                $('#bigcommerce-artifi-iframe-container').css({ 'position': 'initial', 'left': '0', 'display': 'block' })
                $('.productView').css('display', 'none');
                $('#artifiAddToCart').css('display', 'block');
            }
            else {
                $('#bigcommerce-artifi-iframe-container').css('visibility', 'hidden');
                $('.productView').css('display', 'block');
                $('#artifiAddToCart').css('display', 'none');
                detachArtifiSkuChangedEventHandler(); // Detach the event listener

            }
        }
    }

    function insertCustomizeButton(buttonLabel, IsOptional, productSku, extraQueryString) {
        if (personalizeButton) {
            personalizeButton = personalizeButton.replace(new RegExp("{personalizeButtonLabel}", 'g'), buttonLabel);
        } else {
            var personalizeButton = $('<div>');
            personalizeButton.css({
                'display': 'inline-block',
            });
            personalizeButton.attr('id', '');
            personalizeButton.attr('class', '');
            personalizeButton.html('<input value="' + buttonLabel + '" type="button" class="' + $(addToCartSelector).attr('class') + '" title="' + buttonLabel + '">');
            personalizeButton.attr('onClick', "BigCommerceArtifi.ProductPage.launchDesignerForVariant('" + productSku + "', '" + extraQueryString + "');");
        }
        if (IsOptional == 1) {
            $(addToCartSelector).show();
        }

        if (personalizeButtonContainer) {
            $(personalizeButtonContainer).append(personalizeButton);
        } else {
            $('#ProductDetails').find('.addto').append(personalizeButton);
        }

    }

    /*
*This method will initialize designer if an variant sku is selected.
 *@param @string @productSku - Parent SKU of product.
 *@param @string @extraQueryString - additional parameter for launching
*/
    function launchDesignerForVariant(productSku, extraQueryString) {
        var sku = $('.productView').find('[data-product-sku]').text().trim();
        if (sku && productSku) {
            attachArtifiSkuChangedEventHandler();
            insertArtifiDesigner(productSku, sku, extraQueryString);
            toggleArtifiDesigner();
        }
    }
    function triggerAddToCartEvent() {
        Artifi.AddToCart();
    };
    function isInEditMode() {
        var designId = BigCommerceArtifi.Application.getUrlParameter('designId');

        return parseInt(designId);
    }

    function editModeSKU() {
        var designId = BigCommerceArtifi.Application.getUrlParameter('designId');
        var sku = ""
        if (designId) {
            sku = BigCommerceArtifi.Application.getUrlParameter('sku');
        }


        return sku;
    }


    function insertArtifiDesigner(productSku, sku, extraQueryString) {
        var integrationType = BigCommerceArtifi.Application.getIntegrationType();
        if (integrationType && integrationType.toLowerCase() == 'false') {
            if (!productSku && !sku) {

                /*Commented out to troubleshoot issue with 'Refrigiwear' where 'productSku' was coming as undefined,
                causing the 'Personalize' button to be disabled. After commenting, all conditions have been verified
                and the functionality is working correctly. */

                //$('input[type="button"][value="Personalize"]').attr("disabled", "disabled");
                return
            }
            $('input[type="button"][value="Personalize"]').attr("disabled", false);
            if (sku && productSku && productSku !== sku) {
                isArtifiInitialize = false;
            }
            if (isArtifiInitialize && sku) {
                Artifi.setSkuDetails(sku);
                return true;
            }
            $("#bigcommerce-artifi-iframe-container").remove();
            $("#bigcommerce-artifi-background").remove();
            var personalizeContainer = "";
            if (personalizeIframeContainer) {
                personalizeContainer = $(personalizeIframeContainer);
            } else {
                personalizeContainer = $('#ProductDetails')
            }
            var customerId = BigCommerceArtifi.Customer.getCustomerId(),
                isGuest = customerId ? false : true,
                width = personalizeContainer.width();
            var designId = isInEditMode();


            var background = $('<div>');

            var exitCustomizationBtn = $('<div>');

            var iframeLoader = $('<div>');
            iframeLoader.css({
                'height': '710px',
                'width': '100%',
                'position': 'absolute',
                'text-align': 'center',
                'vertical-align': 'middle',
                'line-height': '710px'
            });
            iframeLoader.html('Loading...')
            var closeButton = $('<a>');
            closeButton.attr('id', 'bigcommerce-artifi-popup-header-close-button');
            closeButton.css({
                'font-size': '15px',
                'float': 'right',
                'margin': '15px 50px',
                'color': '#00a5e6',
                'z-index': '2',
                'position': 'relative',
            });
            closeButton.html('[Close]');
            closeButton.attr('href', 'javascript:void(0)');
            closeButton.attr('onClick', 'BigCommerceArtifi.ProductPage.toggleArtifiDesigner(' + designId + ');');
            closeButton.html('<span aria-hidden="true">Exit Customization</span>')
            exitCustomizationBtn.append(closeButton);
            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
                width = "95%"
            }
            else {
                width > 1024 ? width = '1024px' : width = width + 'px'
            }
            var iframeContainer = $('<div>');
            iframeContainer.attr('id', 'bigcommerce-artifi-iframe-container');
            iframeContainer.css({
                'position': 'absolute',
                'visibility': 'hidden',
                'width': '100%'
            });

            $('#bigCommerceProductView')
                .prepend(iframeContainer);
            $('#bigcommerce-artifi-iframe-container')
                .append(exitCustomizationBtn)
                .append(iframeLoader);


            var artifiIntegrationValues = BigCommerceArtifi.Application.getBaseIntergrationValues();

            if (extraQueryString) {
                artifiIntegrationValues.extraQueryString = extraQueryString;
            }
            if (sku && sku != productSku) {
                artifiIntegrationValues.sku = sku;
            } else {
                artifiIntegrationValues.productCode = productSku;
            }
            if (customerId)
                artifiIntegrationValues.userId = customerId.toString();

            artifiIntegrationValues.isGuest = isGuest;
            artifiIntegrationValues.Height = '750px';
            artifiIntegrationValues.Width = '100%';

            if (designId > 0) {
                artifiIntegrationValues.designId = designId;
            }

            if (artifiIntegrationValues.userId) {
                Artifi.Initialize(artifiIntegrationValues);
                isArtifiInitialize = true;
            } else {
                BigCommerceArtifi.Customer.fetchCustomer('', function (email, customerData) {
                    artifiIntegrationValues.userId = customerData.customerId.toString();
                    Artifi.Initialize(artifiIntegrationValues);
                    isArtifiInitialize = true;
                })

            }

            if (designId > 0) {
                toggleArtifiDesigner();
            }
        }
    }
    function initializeArtifi(sku, designId) {
        if (sku)
        {
            Artifi.initialize({
                webApiClientKey: BigCommerceArtifi.Application.getWebApiClientKey(),
                websiteId: BigCommerceArtifi.Application.getWebsiteId(),
                userId: BigCommerceArtifi.Customer.getCustomerId(),
                isGuest: BigCommerceArtifi.Customer.getCustomerId() ? false : true,
                sku: sku,
                designId: designId ? designId : 0
            });
        }
    }
    return {
        init: function (config) {
            return init(config);
        },
        toggleArtifiDesigner: function (designId) {
            return toggleArtifiDesigner(designId);
        },
        insertCustomizeButton: function (buttonLabel, productSku, extraQueryString) {

            return insertCustomizeButton(buttonLabel, productSku, extraQueryString);
        },
        addToCartEventHandler: function (cartItemRows) {

            return addToCartEventHandler(cartItemRows);
        },
        updatePreviewPopup: function (previewUrl) {
            return updatePreviewPopup(previewUrl);
        },
        triggerAddToCartEvent: function () {
            return triggerAddToCartEvent();
        },
        launchDesignerForVariant: function (productSku, extraQueryString) {
            return launchDesignerForVariant(productSku, extraQueryString);
        }

    };
})(window.jQuery);

BigCommerceArtifi.CartPage = (function ($) {
    'use strict';
    var extraQueryStringOption;

    function init(config) {
        var extraQueryString = (config && config.extraQueryString) ? config.extraQueryString : "";
        $(window)
            .ready(fetchCartDetails(extraQueryString))
            .ready(hideArtifiDesignId())
            .ready(initRequestsObserver())
            .ready(registerArtifiEventHandler());

    }
    /*EDIT Mode END*/
    function registerArtifiEventHandler() {
        if (window.addEventListener) {
            addEventListener("message", receiveMessage, false);
        } else {
            attachEvent("onmessage", receiveMessage);
        }
    }
    function receiveMessage(eventObject) {
        if (eventObject === null || typeof eventObject !== 'object') {
            return false;
        }

        var eventData = {};

        try {
            eventData = JSON.parse(eventObject.data);
        } catch (e) {
            return false;
        }

        switch (eventData.action) {
            case 'add-to-cart':
                artifiProductUpdateHandler(eventData.data.custmizeProductId);
                break;
        }
    }
    function artifiProductUpdateHandler(custmizeProductId) {
        closeEditModel(custmizeProductId);
    }
    /*EDIT Mode END*/
    function fetchCartDetails(extraQueryStringOption) {
        var cartItemsCollectionSelector = $(cartTableContainer)
            .find('> tbody')
            .find('> tr');

        cartItemsCollectionSelector.each(function (index) {
            var element = $(this),
                productId = element.attr('data-product-id'),
                productSku = element.attr('data-product-sku'),
                cartItemId = element.attr('data-cart-item-id');
            //Check Artifi Design Id and Then Send Cart Details Server Call
            var customAttributes = element.find('.definitionList-key'),
                pattern = regexArtifiDesignId;
            var isArtifiDesign = false;
            var artifiDesignId = 0;
            customAttributes.each(function () {
                var result = pattern.exec($(this).html());
                if (result !== null) {
                    artifiDesignId = parseInt($(this).next('dd').html().trim());
                    isArtifiDesign = true;
                }
                pattern.lastIndex = 0;
            });

            if (artifiDesignId > 0) {
                processFetchedCartItemDetails(artifiDesignId, element, extraQueryStringOption);
                //RemoveCartItem
                element.find('.cart-remove').attr('onclick', 'BigCommerceArtifi.CartPage.removeCartItem("' + cartItemId + '");return false;');
            }
        });
    }

    function fetchCartItemsDetailsId() {
        var cartItemsCollectionSelector = $(cartTableContainer)
            .find('> tbody')
            .find('> tr');

        cartItemsCollectionSelector.each(function (index) {
            var element = $(this),
                productId = element.attr('data-product-id'),
                productSku = element.attr('data-product-sku'),
                cartItemId = element.attr('data-cart-item-id');
            //Check Artifi Design Id and Then Sent Cart Details Server Call
            var customAttributes = element.find('.definitionList-key'),
                pattern = regexArtifiDesignId;
            var isArtifiDesign = false;
            customAttributes.each(function () {
                var result = pattern.exec($(this).html());
                if (result !== null) {
                    isArtifiDesign = true;
                }
                pattern.lastIndex = 0;
            });
            if (isArtifiDesign) {
                var endpoint = 'product/productDetails?cartItemId=' + cartItemId;
                BigCommerceArtifi.Application.sendRequest(
                    endpoint,
                    'GET',
                    '',
                    processFetchedCartItemDetails,
                    element
                );

                element
                    .find('.cart-remove')
                    .attr('onclick', 'BigCommerceArtifi.CartPage.removeCartItem("' + cartItemId + '");return false;');
            }
        });

    }

    function hideArtifiDesignId() {
        var labelsCollectionSelector = $(cartTableContainer)
            .find('> tbody')
            .find('> tr')
            .find('.definitionList-key'),
            pattern = regexDesignIdPdfXml;;

        labelsCollectionSelector.each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                $(this)
                    .next('dd')
                    .hide();
                $(this)
                    .hide();
            }
            pattern.lastIndex = 0;
        });
    }

    function initRequestsObserver() {
        var pattern = /w=editconfigurablefieldsincart/g;

        $(window.document).ajaxSuccess(function (event, xhr, settings) {
            var result = pattern.exec(settings.url);
            if (result !== null) {
                hideArtifiDesignIdPopupField();
            }
        });
    }

    function hideArtifiDesignIdPopupField() {
        var labelsCollectionSelector = $('#CartEditProductFieldsForm')
            .find('label'),
            pattern = regexDesignIdPdfXml;

        labelsCollectionSelector.each(function () {
            var html = $(this).html(),
                result = pattern.exec(html);
            if (result !== null) {
                $(this)
                    .closest('.productAttributeRow')
                    .hide();
            }

            pattern.lastIndex = 0;
        });
    }

    function processFetchedCartItemDetails(response, element, extraQueryStringOption) {
        insertButtons(response, element, extraQueryStringOption);
        replaceThumbnail(response, element);

    }

    function insertButtons(response, element, extraQueryStringOption) {
        // Set the data-design-id attribute
        element.attr('data-design-id', response);

        // Extract the Artifi Personalized Data value
        var personalizedDataElement = element.find('.definitionList-key:contains("Artifi Personalized Data:")')
            .next('.definitionList-value');
        var personalizedData = personalizedDataElement.length ? personalizedDataElement.text().trim() : null;

        if (!personalizedData) {
            personalizedData = '{}'; // Default to an empty object string if no data is available
        }

        // Convert personalizedData string to an object
        var personalizedDataObj;
        try {
            personalizedDataObj = JSON.parse(personalizedData);
        } catch (e) {
            console.error("Failed to parse personalizedData:", e);
            personalizedDataObj = {}; // Default to an empty object in case of parsing error
        }

        console.log("Artifi Personalized Data Object:", personalizedDataObj); // For debugging or further use

        var useProductCode = 0;
        if (response) {
            useProductCode = 1;
        }

        // Replace placeholders in the cartButtonStr
        var cartButtonStr = cartPreviewAndEditButton;
        cartButtonStr = cartButtonStr.replace(new RegExp("{artifiDesignId}", 'g'), response);
        cartButtonStr = cartButtonStr.replace(new RegExp("{extraQueryStringOption}", 'g'), extraQueryStringOption);
        cartButtonStr = cartButtonStr.replace(new RegExp("{useProductCode}", 'g'), useProductCode);

        // Insert the buttons into the appropriate container
        if (cartButtonContainerRef) {
            element.find('[data-art-container]').html(cartButtonStr);
        } else {
            element.find('.cart-item-name').append(cartButtonStr);
        }

        // Handle the change button container
        if (changeButtonContainer) {
            $(changeButtonContainer).remove();
        } else {
            element.find('a:contains("Change")').hide();
        }

        // Append new <dt> and <dd> elements conditionally
        var definitionList = element.find('.definitionList');

        // Check if text and image data exist
        var textExists = personalizedDataObj.designData && personalizedDataObj.designData[0] &&
            personalizedDataObj.designData[0].text && personalizedDataObj.designData[0].text[0] &&
            personalizedDataObj.designData[0].text[0].text;
        var imageExists = personalizedDataObj.designData && personalizedDataObj.designData[0] &&
            personalizedDataObj.designData[0].image && personalizedDataObj.designData[0].image[0];

        // Append text if it exists
        if (textExists) {
            var dtText = $('<dt>').addClass('definitionList-key').text('Text:');
            var ddText = $('<dd>').addClass('definitionList-value').text(personalizedDataObj.designData[0].text[0].text);
            definitionList.append(dtText, ddText);
        }

        // Append image if it exists
        if (imageExists) {
            var dtImage = $('<dt>').addClass('definitionList-key').text('Image:');
            var ddImage = $('<dd>').addClass('definitionList-value').text(personalizedDataObj.designData[0].image[0].imageName);
            definitionList.append(dtImage, ddImage);
        }
    }

    function replaceThumbnail(response, element) {
        var imageSrc = BigCommerceArtifi.Application.getPreviewImageURL(response);
        var image = new Image();
        image.src = imageSrc;
        image.onload = function () {
            element.find('img.cart-item-image').attr('src', image.src).attr('srcset', image.src);
        };
    }

    function removeCartItem(cartItemId) {
        checkExist();
        function checkExist() {
            if ($('button.swal2-confirm').is(':visible')) { //if the container is visible on the page
                $("button.swal2-confirm").click(function () {
                    var endpoint = 'cart',
                        cartItems = Cookies.get(BigCommerceArtifi.Constants.cartItemsCookieName);

                    if (cartItems) {
                        cartItems = JSON.parse(cartItems);
                    } else {
                        cartItems = [];
                    }

                    BigCommerceArtifi.Application.sendRequest(
                        endpoint,
                        'DELETE',
                        JSON.stringify({
                            'cartItemId': cartItemId,
                        }),
                        function (response) {
                            var index = cartItems.indexOf(cartItemId);
                            if (index > -1) {
                                cartItems.splice(index, 1);
                            }

                            document.location.href = 'cart.php?action=remove&item=' + cartItemId;
                        }
                    );

                    return false;
                });
                clearTimeout();
            } else {
                setTimeout(checkExist, 50); //wait 50 ms, then try again
            }
        }
    }

    function previewCartItem(designId, useProductCode, productSku) {

        if (!productSku) {
            productSku = $(cartTableContainer)
                .find('tbody')
                .find('tr[data-design-id=' + designId + ']')
                .attr('data-product-sku');
        }
        var artifiIntegrationValues = BigCommerceArtifi.Application.getBaseIntergrationValues(),
            customerId = BigCommerceArtifi.Customer.getCustomerId(),
            isGuest = customerId ? false : true,
            width = 1170,
            height = 540,
            maxWidth = parseInt($(window).innerWidth),
            maxHeight = parseInt($(window).innerHeight);

        if (width > maxWidth) {
            width = maxWidth;
        }

        if (height > maxHeight) {
            height = maxHeight;
        }

        if (parseInt(useProductCode)) {
            artifiIntegrationValues.productCode = productSku;
        } else {
            artifiIntegrationValues.sku = productSku;
        }
        var webApiClientKey = BigCommerceArtifi.Application.getWebApiClientKey()
        var websiteId = BigCommerceArtifi.Application.getWebsiteId()

        artifiIntegrationValues.designId = designId;
        artifiIntegrationValues.userId = customerId ? customerId.toString() : "0";
        artifiIntegrationValues.isGuest = isGuest;
        artifiIntegrationValues.width = width;
        artifiIntegrationValues.height = height;
        artifiIntegrationValues.webApiclientKey = webApiClientKey;
        artifiIntegrationValues.websiteid = websiteId;

        var integrationType = BigCommerceArtifi.Application.getIntegrationType();
        if (integrationType && integrationType.toLowerCase() == 'false') {
            Artifi.PreviewPopUp(artifiIntegrationValues);
        }
        else if (integrationType && integrationType.toLowerCase() == 'true')
        {
            Artifi.openPreviewInPopup(artifiIntegrationValues);
        }
    }
    /**
    * Edits a cart item based on the integration type.
    * 
    * @param {object} event - The event triggering the edit action.
    * @param {string} designId - The design ID of the item to edit.
    * @param {string} extraQueryStringOption - Additional query string parameters.
    */
    function editCartItem(event, designId, extraQueryStringOption) {

        var integrationType = BigCommerceArtifi.Application.getIntegrationType();

        if (integrationType && integrationType.toLowerCase() == 'false') {
            editCartItemForIframe(designId, extraQueryStringOption);
        }
        else if (integrationType && integrationType.toLowerCase() == 'true') {
            editCartItemForReact(event, designId, extraQueryStringOption);
        }
    }
    /**
    * Edits a cart item for iframe integration type.
    * 
    * @param {string} designId - The design ID of the item to edit.
    * @param {string} extraQueryStringOption - Additional query string parameters.
    */
    function editCartItemForIframe(designId, extraQueryStringOption) {
        var editIframeContainer = '<div class="modal modal--large fade" id="edit-model" role="dialog">' +
            '<a href="#" class="modal-close" aria-label="Close" onclick="BigCommerceArtifi.CartPage.closeEditModel(\'' + designId + '\')">' +
            '<span aria-hidden="true">x</span>' +
            '</a>' +
            '<div class="modal-content">' +
            '<div class="modal-body">' +
            '<iframe id="iframeContainer" src="' + getDesignerUrl(designId, extraQueryStringOption) + '" width="100%" height="750px" style="border: none;"></iframe>' +
            '</div>' +
            '</div>' +
            '</div>';
        var modelBackground = '<div class="modal-background"></div>';
        $('body')
            .prepend(editIframeContainer)
            .prepend(modelBackground);
        $('#edit-model').css({
            'display': 'block',
            'visibility': 'visible'
        });
        $('.modal-background').css({ 'display': 'block', 'background': 'rgba(51,51,51,.8)' });
    }

    /**
    * Edits a cart item for React integration type.
    * 
    * @param {object} event - The event triggering the edit action.
    * @param {string} designId - The design ID of the item to edit.
    * @param {string} extraQueryStringOption - Additional query string parameters.
    */
    function editCartItemForReact(event, designId, extraQueryStringOption) {
        event.preventDefault(); // Prevent default link behavior

        // Find the closest cart-item container
        var link = event.target;
        var cartItem = link.closest('.cart-item');

        if (cartItem) {
            // Retrieve necessary attributes from the cart-item
            var url = cartItem.getAttribute('data-product-link');
            var cartItemId = cartItem.getAttribute('data-cart-item-id');
            var productId = cartItem.getAttribute('data-product-id');
            var sku = cartItem.getAttribute('data-product-sku');
            var quantityInput = document.querySelector(`#qty-${cartItemId}`);
            var quantity = quantityInput ? quantityInput.value : 1;
            var datadesignId = cartItem.getAttribute('data-design-id');

            // Construct URL to PDP with updated quantity and extra query options
            var pdpUrl = `${url}?edit=true&variant=${sku}&designId=${datadesignId}&quantity=${quantity}&extraQueryString=${extraQueryStringOption}&cartItemId=${cartItemId}`;

            // Redirect to PDP
            window.location.href = pdpUrl;
        }
    }

    function getDesignerUrl(designID, extraQueryStringOption) {
        if (!isNaN(parseInt(designID))) {
            var productSku = $(cartTableContainer)
                .find('tbody')
                .find('tr[data-design-id=' + designID + ']')
                .attr('data-product-sku');
            var application = BigCommerceArtifi.Application;
            var guestData = '&isGuest=true';
            if (BigCommerceArtifi.Customer.getCustomerId()) {
                guestData = '&userId=' + BigCommerceArtifi.Customer.getCustomerId() + '&isGuest=false';
            }
            var extraQueryString = extraQueryStringOption ? '&extraQueryString=' + encodeURIComponent(extraQueryStringOption) : ''; // Check if extraQueryStringOption is provided
            return application.getFrontUrl() + '/Designer?personalization=' + btoa('productCode=' + productSku + '&websiteId=' + application.getWebsiteId() + guestData + '&webApiClientKey=' + application.getWebApiClientKey() + '&customizedProductId=' + designID) + extraQueryString;
        }
    }
    function closeEditModel(designId) {
        $('.modal-background').css({ 'display': 'none' });
        $('#edit-model').css({ 'display': 'none' });
        var element = $("[data-design-id='" + designId + "']");
        replaceThumbnail(designId, element)
    }

    return {
        init: function (config) {
            init(config);
        },
        removeCartItem: function (cartItemId) {
            return removeCartItem(cartItemId);
        },
        previewCartItem: function (designId, useProductCode, productSku) {
            return previewCartItem(designId, useProductCode, productSku);
        },
        editCartItem: function (event, designId, extraQueryStringOption) {
            return editCartItem(event, designId, extraQueryStringOption);
        },
        closeEditModel: function (designId) {
            return closeEditModel(designId);
        }
    };
})(window.jQuery);

BigCommerceArtifi.CustomerOrder = (function ($) {
    'use strict';
    var cartDetails = {};

    function init() {
        $(window)
            .ready(fetchDesignId())
            .ready(initReorderHandler());
    }

    function fetchDesignId() {
        var orderItemsCollectionSelector = $('.account')
            .find('ul')
            .find('li');

        orderItemsCollectionSelector.each(function () {
            var element = $(this);
            hideArtifiDesignId(element);
            var designDetails = {};
            designDetails.DesignId = getArtifiDesignId(element);
            designDetails.PreviewUrl = BigCommerceArtifi.Application.getPreviewImageURL(designDetails.DesignId)
            if (designDetails.DesignId) {
                replaceThumbnail(element, designDetails);
                insertButtons(element, designDetails.DesignId);
            }
        });

        function replaceThumbnail(element, response) {
            var image = new Image();
            image.src = response.PreviewUrl;
            image.onload = function () {
                element
                    .find('img')
                    .attr('src', response.PreviewUrl).removeAttr('srcset').removeAttr('data-srcset');
            };
        };

        function getArtifiDesignId(element) {
            var labelsCollectionSelector = element.find('.definitionList-key');
            var pattern = regexArtifiDesignId;
            var designId;
            labelsCollectionSelector.each(function () {
                var html = $(this).html(),
                    result = pattern.exec(html);
                if (result !== null) {
                    designId = $(this).next('dd').html().trim().toString();
                }
                pattern.lastIndex = 0;
            });
            return designId;
        };


        function hideArtifiDesignId(element) {
            var labelsCollectionSelector = element.find('.definitionList-key');
            var pattern = regexDesignIdPdfXml;

            labelsCollectionSelector.each(function () {
                var html = $(this).html(),
                    result = pattern.exec(html);
                if (result !== null) {
                    $(this)
                        .next('dd')
                        .hide();
                    $(this)
                        .hide();
                }
                pattern.lastIndex = 0;
            });
        };
    }

    function initReorderHandler() {
        getBigCommerceCartDetails();
        $('[data-account-reorder-form]').submit(function (evt) {
            evt.preventDefault();
            var orderID = $('[data-account-reorder-form]').find('[name="orderid"]').val();
            var selectedItemsId = [];
            $('.account').find('input.form-checkbox:checked').each(function () { selectedItemsId.push($(this).val()); });

            if (!$.isEmptyObject(selectedItemsId) && orderID) {
                reorderOrderItem(cartDetails, orderID, selectedItemsId);
            }
        });
    }

    function insertButtons(element, designId) {
        element.attr('data-design-id', designId);
        var sku = element.attr('data-product-sku')
        var html = '<div style="margin-left:10px;display:inline-block;">(';
        //html += '<a style="" href="#" title="Reorder" onclick="BigCommerceArtifi.CustomerOrder.reorderOrderItem(\'' + response.DesignId + '\'); return false;">Reorder</a>, ';
        html += '<a style="" href="#" title="Preview" onclick="BigCommerceArtifi.CustomerOrder.previewOrderItem(\'' + designId + '\' , \'' + sku + '\'); return false;">Preview</a>';
        html += ')</div>';

        element
            .find('.definitionList')
            .after(html);
    }

    function previewOrderItem(designId, productSku) {
        BigCommerceArtifi.CartPage.previewCartItem(designId, 1, productSku);
    }
    function reorderOrderItem(data, orderID, selectedItemsId) {

        var endpoint = 'order/GetReorderProductDetails';

        BigCommerceArtifi.Application.sendRequest(
            endpoint,
            'GET',
            { orderID: orderID, selectedItemsId: selectedItemsId, customerId: BigCommerceArtifi.Customer.getCustomerId() },
            BigcommerceAddtocart,
            data
        );
    }

    function sendReorderCall(DesignId) {
        var customerId = BigCommerceArtifi.Customer.getCustomerId(),
            endpoint = 'https://integrationdesignerdev.artifi.net/Designer/Services/GetReorder';
        endpoint += '?designId=' + designId;
        endpoint += '&userId=' + customerId;
        endpoint += '&websiteId=' + BigCommerceArtifi.Application.getWebsiteId();
        endpoint += '&webApiClientKey=' + BigCommerceArtifi.Application.getWebApiClientKey();

        $.ajax({
            type: 'GET',
            url: endpoint,
            dataType: 'json',
            async: true,
            success: function (response) {
                reorderOrderItemCallbackHandler(response);
            }
        });
    }

    function reorderOrderItemCallbackHandler(reorderData, oldCartData, newCartData) {
        newCartData = getLineItems(newCartData);
        if (!$.isEmptyObject(oldCartData)) {
            oldCartData = getLineItems(oldCartData);
            newCartData = newCartData.filter(item1 => !oldCartData.some(item2 => (item2.id === item1.id)));
        }
        if (newCartData.length != reorderData.length) {
            reorderData = reorderData.filter(item => (!$.isEmptyObject(item.optionSelections)));
        }
        var ReorderDetails = [];
        var customerId = BigCommerceArtifi.Customer.getCustomerId();
        if (newCartData.length) {
            for (var index = 0; index < reorderData.length; index++) {
                if (!$.isEmptyObject(reorderData[index].optionSelections[0])) {
                    ReorderDetails.push({
                        DesignId: reorderData[index].optionSelections[0].optionValue,
                        CartItemId: newCartData[index].id,
                        ProductId: reorderData[index].productId,
                        CustomerId: customerId
                    });
                }

            }
            BigCommerceArtifi.Application.sendRequest(
                'cart/PostReorderProductDetails',
                'POST',
                { 'orderItems': ReorderDetails },
            );
        }

    }

    function getLineItems(data) {
        if (!$.isEmptyObject(data.lineItems)) {
            return data.lineItems.physicalItems;
        } else if (!$.isEmptyObject(data[0].lineItems)) {
            return data[0].lineItems.physicalItems;
        }
    }

    function getBigCommerceCartDetails() {
        $.ajax({
            contentType: 'application/json',
            dataType: 'json',
            success: function (data) {
                cartDetails = data;
                console.log("getBigCommerceCartDetails Success");
            },
            error: function () {
                console.log("getBigCommerceCartDetails failed");
                return "error";
            },
            type: 'GET',
            url: '/api/storefront/carts'
        });
    }

    function BigcommerceAddtocart(reorderdata, oldCartData) {
        var endpoint = '/api/storefront/carts';
        if (!$.isEmptyObject(oldCartData)) {
            var endpoint = '/api/storefront/carts/' + oldCartData[0].id + '/items';
        }
        $.ajax({
            contentType: 'application/json',
            data: JSON.stringify(reorderdata),
            dataType: 'json',
            success: function (data) {
                console.log("Reorder  succeeded");
                reorderOrderItemCallbackHandler(reorderdata.lineItems, oldCartData, data)
                document.location.href = 'cart.php';
            },
            error: function () {
                console.log("Cart Details failed");
            },
            type: 'POST',
            url: endpoint
        });
    }

    return {
        init: function () {
            init();
        },
        previewOrderItem: function (designId, productSku) {
            return previewOrderItem(designId, productSku);
        },
        reorderOrderItem: function (designId) {
            return reorderOrderItem(designId);
        }
    };
})(window.jQuery);

BigCommerceArtifi.SavedDesigns = (function ($) {
    'use strict';

    function init() {
        $(window)
            .ready(BigCommerceArtifi.Customer.fetchCustomer(false, initSavedDesigns));
    }

    function initSavedDesigns(email, customer) {
        var artifiIntegrationValues = BigCommerceArtifi.Application.getBaseIntergrationValues();

        artifiIntegrationValues.userId = customer.customerId;
        artifiIntegrationValues.successCallback = savedDesignsSuccessCallback;
        artifiIntegrationValues.errorCallback = savedDesignsErrorCallback;

        Artifi.GetCustomizedProductByUserId(artifiIntegrationValues);

        BigCommerceArtifi.Customer.setFetchingInProgress(false);
    }

    function savedDesignsSuccessCallback(response) {
        if (response.Response === 'Error') {
            savedDesignsErrorCallback(response);

            return false;
        }

        var container = $('.PageContent');

        $.each(response.Data, function (index, design) {
            var productContainer = $('<div>');

            productContainer.css({
                'float': 'left',
                'margin-right': '10px',
                'margin-bottom': '20px'
            });

            var productImageContainer = $('<div>'),
                productImage = $('<img>').attr(
                    'src',
                    design.CustomDesignModelList[0].ThumbnailImagePath
                );

            productImage.css({ 'margin-right': '10px' });

            productImageContainer
                .append(productImage)
                .css({
                    'float': 'left'
                });

            var productDescriptionContainer = $('<div>'),
                productCode = $('<p>').text('SKU: ' + design.SKU),
                productDesignId = $('<p>').text('Design Id: ' + design.Id);

            productCode.css({ 'margin-bottom': '0' });

            productDescriptionContainer
                .append(productCode)
                .append(productDesignId)
                .css({
                    'float': 'left'
                });

            productContainer
                .append(productImageContainer)
                .append(productDescriptionContainer);

            var endpoint = 'product/productDetails?designId=' + design.Id;
            BigCommerceArtifi.Application.sendRequest(
                endpoint,
                'GET',
                '',
                insertButtons,
                productDescriptionContainer
            );

            container.append(productContainer);
        });
    }

    function insertButtons(response, element) {
        var addToCart = $('<a>'),
            domain = document.location.hostname,
            url;

        url = document.location.protocol + '//';
        url += domain;
        url += '/products.php?productId=' + response.ProductId + '&designId=' + response.DesignId;

        addToCart
            .attr(
                'onclick',
                'document.location.href="' + url + '";return false;'
            )
            .text('Add To Cart');

        element.append(addToCart);
    }

    function savedDesignsErrorCallback(response) {
        var container = $('.PageContent'),
            errorMessage = $('<p>').text(response.Message);

        container.append(errorMessage);
    }

    return {
        init: function () {
            init();
        }
    };
})(window.jQuery);

function UpdateCheckoutStatus(designId, hash) {
    var endpoint = 'order/UpdateCheckoutStatus';
    BigCommerceArtifi.Application.sendRequest(
        endpoint,
        'GET',
        { designId: designId, hash: hash },
        function (response) {
            console.log(response);
        }
    );
}

BigCommerceArtifi.Application.init({
    'merchantId': 'D898862FC8E0A1DDCF345BA309B3CF59',
    'websiteId': 'MzEx',
    'webApiClientKey': 'OTRmMjhkNTItZDAyMi00Y2I5LWEyYTctNjZmYzY4MTQ1MDM0',
    'applicationHost': 'https://bigcommerce.artifi.net/api/',
    'integrationUrl': 'https://designer.artifi.net/script/sasintegration/artifiintegration.min.js',
    'frontUrl': 'https://designer.artifi.net',
    'integrationType': 'False',
    'artifiBaseUrl': 'https://designer.artifi.net/'
});