FruitBank/Presentation/Nop.Web/Views/Product/_ProductEstimateShipping.cshtml

@model ProductDetailsModel.ProductEstimateShippingModel

@if (Model.Enabled)
{
    <div class="product-estimate-shipping">
        <a href="#estimate-shipping-popup-@Model.ProductId"
           id="open-estimate-shipping-popup-@Model.ProductId"
           class="open-estimate-shipping-popup"
           data-effect="estimate-shipping-popup-zoom-in">
        </a>
        <div id="estimate-shipping-popup-@Model.ProductId" class="estimate-shipping-popup mfp-with-anim mfp-hide">
            @await Html.PartialAsync("_EstimateShippingPopUp", Model)
        </div>
    </div>

    <script asp-location="Footer">

        $(function() {
            var popUp = {};
            var reloadPopUp = false;
            var initialized = false;

            var settings = {
                opener: '#open-estimate-shipping-popup-@Model.ProductId',
                form: '#product-details-form',
                contentEl: '#estimate-shipping-popup-@Model.ProductId',
                countryEl: '#@Html.IdFor(model => model.CountryId)',
                stateProvinceEl: '#@Html.IdFor(model => model.StateProvinceId)',
                zipPostalCodeEl: '#@Html.IdFor(model => model.ZipPostalCode)',
                useCity: @Model.UseCity.ToString().ToLowerInvariant(),
                cityEl: '#@Html.IdFor(model => model.City)',
                requestDelay: @Model.RequestDelay,
                localizedData: {
                    noShippingOptionsMessage: '@JavaScriptEncoder.Default.Encode(T("Shipping.EstimateShippingPopUp.NoShippingOptions").Text)',
                    countryErrorMessage: '@JavaScriptEncoder.Default.Encode(T("Shipping.EstimateShipping.Country.Required").Text)',
                    zipPostalCodeErrorMessage: '@JavaScriptEncoder.Default.Encode(T("Shipping.EstimateShipping.ZipPostalCode.Required").Text)',
                    cityErrorMessage: '@JavaScriptEncoder.Default.Encode(T("Shipping.EstimateShipping.City.Required").Text)',
                },
                urlFactory: function (address) {
                    var params = $.param({
                        CountryId: address.countryId,
                        StateProvinceId: address.stateProvinceId,
                        ZipPostalCode: address.zipPostalCode,
                        City: address.city
                    });

                    return '@Html.Raw(Url.RouteUrl("ProductEstimateShipping", new { ProductId = Model.ProductId }))&' + params;
                },
                handlers: {
                    openPopUp: function () {
                        if (reloadPopUp) {
                            var address = popUp.getShippingAddress();
                            if (popUp.validateAddress(address)) {
                                popUp.getShippingOptions(address);
                            } else {
                                popUp.clearShippingOptions();
                            }

                            reloadPopUp = false;
                        }
                    },
                    load: function () {
                        if (!$.magnificPopup.instance.isOpen) {
                            var shippingTitle = $('<div/>').addClass('shipping-title')
                                .append($('<span/>').addClass('shipping-price-title').text('@JavaScriptEncoder.Default.Encode(T("Products.EstimateShipping.PriceTitle").Text)'))
                                .append($('<span/>').addClass('shipping-loading'));
                            $('#open-estimate-shipping-popup-@Model.ProductId').html(shippingTitle);
                        }
                    },
                    success: function (address, response) {
                        // initialize on load only once
                        var option = popUp.getActiveShippingOption();
                        popUp.selectShippingOption(option);

                        initialized = true;
                        popUp.settings.handlers.success = undefined;
                    },
                    error: function () {
                        popUp.selectShippingOption();
                    },
                    selectedOption: function (option) {
                        if (option && option.provider && option.price && popUp.validateAddress(option.address)) {
                            var shippingContent = $('#open-estimate-shipping-popup-@Model.ProductId');

                            var shippingTitle = $('<div/>').addClass('shipping-title')
                                .append($('<span/>').addClass('shipping-price-title').text('@JavaScriptEncoder.Default.Encode(T("Products.EstimateShipping.PriceTitle").Text)'))
                                .append($('<span/>').addClass('shipping-price').text(option.price));
                            shippingContent.html(shippingTitle);

                            var estimatedDelivery = $('<div/>').addClass('estimated-delivery')
                                .append($('<div/>').addClass('shipping-address')
                                    .append($('<span/>').text('@JavaScriptEncoder.Default.Encode(T("Products.EstimateShipping.ToAddress").Text) ' + option.address.countryName + ', ' + (option.address.stateProvinceName ? option.address.stateProvinceName + ', ' : '') + (popUp.settings.useCity ? option.address.city : option.address.zipPostalCode) + ' @JavaScriptEncoder.Default.Encode(T("Products.EstimateShipping.ViaProvider").Text) ' + option.provider))
                                    .append($('<i/>').addClass('arrow-down')));

                            if (option.deliveryDate && option.deliveryDate !== '-')
                                estimatedDelivery.append($('<div/>').addClass('shipping-date').text('@JavaScriptEncoder.Default.Encode(T("Products.EstimateShipping.EstimatedDeliveryPrefix").Text) ' + option.deliveryDate));

                            shippingContent.append(estimatedDelivery);
                        } else {
                            $('#open-estimate-shipping-popup-@Model.ProductId')
                                .html($('<span/>').text('@JavaScriptEncoder.Default.Encode(T("Products.EstimateShipping.NoSelectedShippingOption").Text)'))
                                .append($('<i/>').addClass('arrow-down'));
                        }
                    }
                }
            };
            popUp = createEstimateShippingPopUp(settings);
            popUp.init();

            var initialLoad = function () {
                var address = popUp.getShippingAddress();
                if (popUp.validateAddress(address))
                    popUp.getShippingOptions(address);
                else
                    popUp.selectShippingOption();
            };
            initialLoad();

            var attributeChangedHandler = function (e) {
                var productId = e.changedData.productId;
                if (productId === @Model.ProductId) {
                    if (popUp.params.selectedShippingOption) {
                        var address = popUp.params.selectedShippingOption.address;
                        var enteredAddress = popUp.getShippingAddress();

                        if (!popUp.addressesAreEqual(address, enteredAddress))
                            reloadPopUp = true;

                        popUp.getShippingOptions(address);
                    } else {
                        if (!initialized)
                            initialLoad();
                        else
                            reloadPopUp = true;
                    }
                }
            };
            // Prevent double init on load. If product has attributes then trigger is fires when page is loaded and attributes are loaded.
            setTimeout(function () {
                $(document).on('product_attributes_changed', attributeChangedHandler);
            }, 500);
            $(document).on('product_quantity_changed', attributeChangedHandler);
        });

    </script>
}