ildar-shaymukhametov_grandnode-refactorings/Grand.Web/Views/Checkout/OnePageCheckout.cshtml
@model OnePageCheckoutModel
@inject IWebHelper webHelper
@inject IPageHeadBuilder pagebuilder

@{
    Layout = "_ColumnsOneClean";

    pagebuilder.AddScriptParts(ResourceLocation.Footer, "~/scripts/public.accordion.js");
    pagebuilder.AddScriptParts(ResourceLocation.Footer, "~/scripts/public.onepagecheckout.js");

    var storeLocation = webHelper.GetStoreLocation();

    //title
    pagebuilder.AddTitleParts(T("PageTitle.Checkout").Text);
}
@{
    //step numbers
    int billingAddressStepNumber = 1;
    int shippingAddressStepNumber = 2;
    int shippingMethodStepNumber = 3;
    int paymentMethodStepNumber = 4;
    int paymentInfoStepNumber = 5;
    int confirmOrderStepNumber = 6;
    if (!Model.ShippingRequired)
    {
        paymentMethodStepNumber = paymentMethodStepNumber - 2;
        paymentInfoStepNumber = paymentInfoStepNumber - 2;
        confirmOrderStepNumber = confirmOrderStepNumber - 2;
    }
    if (Model.DisableBillingAddressCheckoutStep)
    {
        shippingAddressStepNumber--;
        shippingMethodStepNumber--;
        paymentMethodStepNumber--;
        paymentInfoStepNumber--;
        confirmOrderStepNumber--;
    }
}
<script asp-location="Footer">
    $(".opc li.active").prev("li").removeClass("dontGo");
    $(".opc li.active").nextAll("li").addClass("dontGo");
</script>
<div class="page checkout-page">
    <h1 class="generalTitle h2">@T("Checkout")</h1>
    @await Component.InvokeAsync("Widget", new { widgetZone = "opc_content_before" })
    <ol class="opc pl-0" id="checkout-steps">
        <li id="opc-billing" class="tab-section allow">
            <div class="step-title card card-grey mb-1 text-left p-0 col-12 rounded-0">
                <div class="card-body p-2">
                    <blockquote class="card-bodyquote">
                        <span>@billingAddressStepNumber. @T("Checkout.BillingAddress")</span>
                    </blockquote>
                </div>
            </div>
            <div id="checkout-step-billing" class="step mt-2 mb-2 a-item" style="display: none;">
                <form id="co-billing-form" action="">
                    <div id="checkout-billing-load">
                        <partial name="OpcBillingAddress" model="Model.BillingAddress" />
                        @*billing address content will be loaded here*@
                    </div>
                </form>
                <script asp-location="Footer">
                        Billing.init('#co-billing-form', '@(storeLocation)checkout/OpcSaveBilling/', @(Model.DisableBillingAddressCheckoutStep.ToString().ToLowerInvariant()));
                        if ($("#billing-address-select").length > 0) {
                            Billing.newAddress(!$('#billing-address-select').val());
                        }
                </script>
                <div class="col-12 buttons pb-2 pt-2 px-0 my-0" id="billing-buttons-container">
                    <input type="button" title="@T("Common.Continue")" class="btn btn-info new-address-next-step-button" onclick="Billing.save()" value="@T("Common.Continue")" />
                    <span class="please-wait" id="billing-please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                </div>
            </div>
        </li>
        @if (Model.ShippingRequired)
        {
            <li id="opc-shipping" class="tab-section">
                <div class="step-title card card-grey mb-1 text-left p-0 col-12 rounded-0">
                    <div class="card-body p-2">
                        <blockquote class="card-bodyquote">
                            <span>@shippingAddressStepNumber. @T("Checkout.ShippingAddress")</span>
                        </blockquote>
                    </div>
                </div>
                <div id="checkout-step-shipping col-12" class="step mt-2 mb-2 a-item" style="display: none;">
                    <form action="" id="co-shipping-form">
                        <div id="checkout-shipping-load">
                            @*shipping address content will be loaded here*@
                        </div>
                    </form>
                    <script asp-location="Footer">
                            Shipping.init('#co-shipping-form', '@(storeLocation)checkout/OpcSaveShipping/');
                            if ($("#shipping-address-select").length > 0) {
                                Shipping.newAddress(!$('#shipping-address-select').val());
                            }
                    </script>
                    <div class="col-12 buttons pt-1 pb-1 px-0 my-3" id="shipping-buttons-container">
                        @if (!Model.DisableBillingAddressCheckoutStep)
                        {
                            <a class="btn btn-secondary" href="#" onclick="Checkout.back(); return false; ">@T("Common.Back")</a>

                        }
                        <input type="button" class="btn btn-info new-address-next-step-button" title="@T("Common.Continue")" onclick="Shipping.save()" value="@T("Common.Continue")" />
                        <span id="shipping-please-wait" class="please-wait" style="display: none;"> @T("Common.LoadingNextStep")</span>
                    </div>
                </div>
            </li>
            <li id="opc-shipping_method" class="tab-section">

                <div class="step-title card card-grey mb-1 text-left p-0 col-12 rounded-0">
                    <div class="card-body p-2">
                        <blockquote class="card-bodyquote">
                            <span>@shippingMethodStepNumber. @T("Checkout.ShippingMethod")</span>
                        </blockquote>
                    </div>
                </div>
                <div id="checkout-step-shipping-method" class="step mt-2 mb-2 a-item" style="display: none;">
                    <form id="co-shipping-method-form" action="">
                        <div id="checkout-shipping-method-load">
                            @*shipping methods content will be loaded here*@
                        </div>
                        <script asp-location="Footer">
                                ShippingMethod.init('#co-shipping-method-form', '@(storeLocation)checkout/OpcSaveShippingMethod/');
                        </script>
                        <div class="col-12 buttons pt-1 pb-1 px-0 my-3" id="shipping-method-buttons-container">
                            <a class="btn btn-secondary" href="#" onclick="Checkout.back(); return false;">@T("Common.Back")</a>
                            <input type="button" class="btn btn-info shipping-method-next-step-button" onclick="ShippingMethod.save()" value="@T("Common.Continue")" />
                            <span id="shipping-method-please-wait" class="please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                        </div>
                    </form>
                </div>
            </li>
        }
        <li id="opc-payment_method" class="tab-section">
            <div class="step-title card card-grey mb-1 text-left p-0 col-12 rounded-0">
                <div class="card-body p-2">
                    <blockquote class="card-bodyquote">
                        <span>@paymentMethodStepNumber. @T("Checkout.PaymentMethod")</span>
                    </blockquote>
                </div>
            </div>
            <div id="checkout-step-payment-method" class="step mt-2 mb-2 a-item" style="display: none;">
                <form action="" id="co-payment-method-form">
                    <div id="checkout-payment-method-load">
                        @*payment methods content will be loaded here*@ Payment is not required
                    </div>
                </form>
                <script asp-location="Footer">
                        PaymentMethod.init('#co-payment-method-form', '@(storeLocation)checkout/OpcSavePaymentMethod/');
                </script>
                <div class="col-12 buttons pt-1 pb-1 my-3 px-0" id="payment-method-buttons-container">
                    @if (paymentMethodStepNumber > 1)
                    {
                        <a class="btn btn-secondary" href="#" onclick="Checkout.back(); return false;">@T("Common.Back")</a>
                    }
                    <input type="button" class="btn btn-info payment-method-next-step-button" onclick="PaymentMethod.save()" value="@T("Common.Continue")" />
                    <span class="please-wait" id="payment-method-please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                </div>
            </div>
        </li>
        <li id="opc-payment_info" class="tab-section">
            <div class="step-title card card-grey mb-1 text-left p-0 col-12 rounded-0">
                <div class="card-body p-2">
                    <blockquote class="card-bodyquote">
                        <span>@paymentInfoStepNumber. @T("Checkout.PaymentInfo")</span>
                    </blockquote>
                </div>
            </div>
            <div id="checkout-step-payment-info" class="step mt-2 mb-2 a-item" style="display: none;">
                <form action="" id="co-payment-info-form">
                    <div id="checkout-payment-info-load">
                        @*payment info content will be loaded here*@ Payment is not required
                    </div>
                </form>
                <script asp-location="Footer">
                        PaymentInfo.init('#co-payment-info-form', '@(storeLocation)checkout/OpcSavePaymentInfo/');
                </script>
                <div class="col-12 buttons pt-1 pb-1 my-3 px-0" id="payment-info-buttons-container">
                    @if (!Model.HasSinglePaymentMethod || paymentMethodStepNumber > 1)
                    {
                        <a class="btn btn-secondary" href="#" onclick="Checkout.back();return false;">@T("Common.Back")</a>
                    }
                    <input type="button" class="btn btn-info payment-info-next-step-button" onclick="PaymentInfo.save()" value="@T("Common.Continue")" />
                    <span class="please-wait" id="payment-info-please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                </div>
            </div>
        </li>
        <li id="opc-confirm_order" class="tab-section">
            <div class="step-title card card-grey mb-1 text-left p-0 col-12 rounded-0">
                <div class="card-body p-2">
                    <blockquote class="card-bodyquote">
                        <span>@confirmOrderStepNumber. @T("Checkout.ConfirmOrder")</span>
                    </blockquote>
                </div>
            </div>
            <div id="checkout-step-confirm-order" class="step mt-2 mb-2 a-item" style="display: none;">
                <div id="checkout-confirm-order-load">
                    @*confirm order content will be loaded here*@
                </div>
                <script asp-location="Footer">
                        ConfirmOrder.init('@(storeLocation)checkout/OpcConfirmOrder/', '@(storeLocation)checkout/completed/');
                </script>
                <div class="col-12 buttons pt-1 pb-1 px-0 my-3" id="confirm-order-buttons-container">
                    <a class="btn btn-secondary" href="#" onclick="Checkout.back(); return false;">@T("Common.Back")</a>
                    <input type="button" class="btn btn-info confirm-order-next-step-button" onclick="ConfirmOrder.save()" value="@T("Common.Confirm")" />
                    <span class="please-wait" id="confirm-order-please-wait" style="display: none;">@T("Checkout.SubmittingOrder")</span>
                </div>
            </div>
        </li>
    </ol>
    @await Component.InvokeAsync("Widget", new { widgetZone = "opc_content_after" })
</div>
<script asp-location="Footer">
        Accordion.init('checkout-steps', '.step-title', true);
        Accordion.openSection('#opc-billing');
        Checkout.init('@(storeLocation)cart/');
        if (Billing.disableBillingAddressCheckoutStep)
        {
            Accordion.hideSection('#opc-billing');
            Billing.save();
        }
</script>