Merge pull request #3512 from magento-mpi/port-94437

[MPI]-port-94437

Author: viktym

app/code/Magento/Sales/Test/Mftf/Section/AdminOrderFormPaymentSection.xml

@@ -9,7 +9,7 @@
 <sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="AdminOrderFormPaymentSection">
-        <element name="header" type="text" selector="#order-methods span.title"/>
+        <element name="header" type="text" selector="#shipping-methods span.title"/>
         <element name="getShippingMethods" type="text" selector="#order-shipping_method a.action-default" timeout="30"/>
         <element name="flatRateOption" type="radio" selector="#s_method_flatrate_flatrate" timeout="30"/>
         <element name="shippingError" type="text" selector="#order[has_shipping]-error"/>

app/code/Magento/Sales/view/adminhtml/templates/order/create/data.phtml

@@ -47,17 +47,15 @@
             </div>
         </section>
 
-        <section id="order-methods" class="admin__page-section order-methods">
-            <div class="admin__page-section-title">
-                <span class="title"><?= /* @escapeNotVerified */ __('Payment &amp; Shipping Information') ?></span>
+        <section id="shipping-methods" class="admin__page-section order-methods">
+            <div id="order-shipping_method" class="admin__page-section-item order-shipping-method">
+                <?= $block->getChildHtml('shipping_method') ?>
             </div>
-            <div class="admin__page-section-content">
-                <div id="order-billing_method" class="admin__page-section-item order-billing-method">
-                    <?= $block->getChildHtml('billing_method') ?>
-                </div>
-                <div id="order-shipping_method" class="admin__page-section-item order-shipping-method">
-                    <?= $block->getChildHtml('shipping_method') ?>
-                </div>
+        </section>
+
+        <section id="payment-methods" class="admin__page-section payment-methods">
+            <div id="order-billing_method" class="admin__page-section-item order-billing-method">
+                <?= $block->getChildHtml('billing_method') ?>
             </div>
         </section>
 

app/code/Magento/Sales/view/adminhtml/templates/order/create/shipping/method/form.phtml

@@ -100,12 +100,8 @@ require(['prototype'], function(){
 </div>
 <script>
     require(["Magento_Sales/order/create/form"], function(){
-
         order.overlay('shipping-method-overlay', <?php if ($block->getQuote()->isVirtual()): ?>false<?php else: ?>true<?php endif; ?>);
         order.overlay('address-shipping-overlay', <?php if ($block->getQuote()->isVirtual()): ?>false<?php else: ?>true<?php endif; ?>);
-
-        <?php if ($block->getQuote()->isVirtual()): ?>
-            order.isOnlyVirtualProduct = true;
-        <?php endif; ?>
+        order.isOnlyVirtualProduct = <?= /* @noEscape */ $block->getQuote()->isVirtual() ? 'true' : 'false'; ?>;
     });
 </script>

app/code/Magento/Sales/view/adminhtml/web/order/create/scripts.js

@@ -4,14 +4,17 @@
  */
 
 define([
-    "jquery",
+    'jquery',
     'Magento_Ui/js/modal/confirm',
     'Magento_Ui/js/modal/alert',
-    "mage/translate",
-    "prototype",
-    "Magento_Catalog/catalog/product/composite/configure",
+    'mage/template',
+    'text!Magento_Sales/templates/order/create/shipping/reload.html',
+    'text!Magento_Sales/templates/order/create/payment/reload.html',
+    'mage/translate',
+    'prototype',
+    'Magento_Catalog/catalog/product/composite/configure',
     'Magento_Ui/js/lib/view/utils/async'
-], function(jQuery, confirm, alert){
+], function (jQuery, confirm, alert, template, shippingTemplate, paymentTemplate) {
 
     window.AdminOrder = new Class.create();
 
@@ -29,7 +32,7 @@ define([
             this.gridProducts   = $H({});
             this.gridProductsGift = $H({});
             this.billingAddressContainer = '';
-            this.shippingAddressContainer= '';
+            this.shippingAddressContainer = '';
             this.isShippingMethodReseted = data.shipping_method_reseted ? data.shipping_method_reseted : false;
             this.overlayData = $H({});
             this.giftMessageDataChanged = false;
@@ -39,7 +42,19 @@ define([
             this.isOnlyVirtualProduct = false;
             this.excludedPaymentMethods = [];
             this.summarizePrice = true;
-            this.timerId = null;
+            this.shippingTemplate = template(shippingTemplate, {
+                data: {
+                    title: jQuery.mage.__('Shipping Method'),
+                    linkText: jQuery.mage.__('Get shipping methods and rates')
+                }
+            });
+            this.paymentTemplate = template(paymentTemplate, {
+                data: {
+                    title: jQuery.mage.__('Payment Method'),
+                    linkText: jQuery.mage.__('Get available payment methods')
+                }
+            });
+
             jQuery.async('#order-items', (function(){
                 this.dataArea = new OrderFormArea('data', $(this.getAreaId('data')), this);
                 this.itemsArea = Object.extend(new OrderFormArea('items', $(this.getAreaId('items')), this), {
@@ -168,43 +183,51 @@ define([
 
             var data = this.serializeData(container);
             data[el.name] = id;
-            if(this.isShippingField(container) && !this.isShippingMethodReseted){
+
+            this.resetPaymentMethod();
+            if (this.isShippingField(container) && !this.isShippingMethodReseted) {
                 this.resetShippingMethod(data);
-            }
-            else{
+            } else{
                 this.saveData(data);
             }
         },
 
-        isShippingField : function(fieldId){
-            if(this.shippingAsBilling){
+        /**
+         * Checks if the field belongs to the shipping address.
+         *
+         * @param {String} fieldId
+         * @return {Boolean}
+         */
+        isShippingField: function (fieldId) {
+            if (this.shippingAsBilling) {
                 return fieldId.include('billing');
             }
+
             return fieldId.include('shipping');
         },
 
-        isBillingField : function(fieldId){
+        /**
+         * Checks if the field belongs to the billing address.
+         *
+         * @param {String} fieldId
+         * @return {Boolean}
+         */
+        isBillingField: function (fieldId) {
             return fieldId.include('billing');
         },
 
-        bindAddressFields : function(container) {
-            var fields = $(container).select('input', 'select', 'textarea');
-            for(var i=0;i<fields.length;i++){
-                Event.observe(fields[i], 'change', this.triggerChangeEvent.bind(this));
-            }
-        },
-
         /**
-         * Calls changing address field handler after timeout to prevent multiple simultaneous calls.
+         * Binds events on container form fields.
          *
-         * @param {Event} event
+         * @param {String} container
          */
-        triggerChangeEvent: function (event) {
-            if (this.timerId) {
-                window.clearTimeout(this.timerId);
-            }
+        bindAddressFields: function (container) {
+            var fields = $(container).select('input', 'select', 'textarea'),
+                i;
 
-            this.timerId = window.setTimeout(this.changeAddressField.bind(this), 500, event);
+            for (i = 0; i < fields.length; i++) {
+                jQuery(fields[i]).change(this.changeAddressField.bind(this));
+            }
         },
 
         /**
@@ -218,7 +241,8 @@ define([
                 matchRes = field.name.match(re),
                 type,
                 name,
-                data;
+                data,
+                resetShipping = false;
 
             if (!matchRes) {
                 return;
@@ -234,20 +258,31 @@ define([
             }
             data = data.toObject();
 
-            if (type === 'billing' && this.shippingAsBilling || type === 'shipping' && !this.shippingAsBilling) {
+            if (type === 'billing' && this.shippingAsBilling) {
+                this.syncAddressField(this.shippingAddressContainer, field.name, field.value);
+                resetShipping = true;
+            }
+
+            if (type === 'shipping' && !this.shippingAsBilling) {
+                resetShipping = true;
+            }
+
+            if (resetShipping) {
                 data['reset_shipping'] = true;
             }
 
             data['order[' + type + '_address][customer_address_id]'] = null;
-            data['shipping_as_billing'] = jQuery('[name="shipping_same_as_billing"]').is(':checked') ? 1 : 0;
+            data['shipping_as_billing'] = +this.shippingAsBilling;
 
             if (name === 'customer_address_id') {
                 data['order[' + type + '_address][customer_address_id]'] =
                     $('order-' + type + '_address_customer_address_id').value;
             }
 
+            this.resetPaymentMethod();
+
             if (data['reset_shipping']) {
-                this.resetShippingMethod(data);
+                this.resetShippingMethod();
             } else {
                 this.saveData(data);
 
@@ -257,7 +292,28 @@ define([
             }
         },
 
-        fillAddressFields : function(container, data){
+        /**
+         * Set address container form field value.
+         *
+         * @param {String} container - container ID
+         * @param {String} fieldName - form field name
+         * @param {*} fieldValue - form field value
+         */
+        syncAddressField: function (container, fieldName, fieldValue) {
+            var syncName;
+
+            if (this.isBillingField(fieldName)) {
+                syncName = fieldName.replace('billing', 'shipping');
+            }
+
+            $(container).select('[name="' + syncName + '"]').each(function (element) {
+                if (~['input', 'textarea', 'select'].indexOf(element.tagName.toLowerCase())) {
+                    element.value = fieldValue;
+                }
+            });
+        },
+
+        fillAddressFields: function(container, data){
             var regionIdElem = false;
             var regionIdElemValue = false;
 
@@ -298,10 +354,15 @@ define([
                     fields[i].setValue(data[name] ? data[name] : '');
                 }
 
-                if (fields[i].changeUpdater) fields[i].changeUpdater();
+                if (fields[i].changeUpdater) {
+                    fields[i].changeUpdater();
+                }
+
                 if (name == 'region' && data['region_id'] && !data['region']){
                     fields[i].value = data['region_id'];
                 }
+
+                jQuery(fields[i]).trigger('change');
             }
         },
 
@@ -332,46 +393,83 @@ define([
             }
         },
 
-        setShippingAsBilling : function(flag){
-            var data;
-            var areasToLoad = ['billing_method', 'shipping_address', 'totals', 'giftmessage'];
+        /**
+         * Equals shipping and billing addresses.
+         *
+         * @param {Boolean} flag
+         */
+        setShippingAsBilling: function (flag) {
+            var data,
+                areasToLoad = ['billing_method', 'shipping_address', 'shipping_method', 'totals', 'giftmessage'];
+
             this.disableShippingAddress(flag);
-            if(flag){
-                data = this.serializeData(this.billingAddressContainer);
-            } else {
-                data = this.serializeData(this.shippingAddressContainer);
-            }
-            areasToLoad.push('shipping_method');
+            data = this.serializeData(flag ? this.billingAddressContainer : this.shippingAddressContainer);
             data = data.toObject();
             data['shipping_as_billing'] = flag ? 1 : 0;
             data['reset_shipping'] = 1;
             this.loadArea(areasToLoad, true, data);
         },
 
-        resetShippingMethod : function(data){
-            var areasToLoad = ['billing_method', 'shipping_address', 'totals', 'giftmessage', 'items'];
-            if(!this.isOnlyVirtualProduct) {
-                areasToLoad.push('shipping_method');
-                areasToLoad.push('shipping_address');
+        /**
+         * Replace shipping method area.
+         */
+        resetShippingMethod: function () {
+            if (!this.isOnlyVirtualProduct) {
+                $(this.getAreaId('shipping_method')).update(this.shippingTemplate);
             }
+        },
 
-            data['reset_shipping'] = 1;
-            this.isShippingMethodReseted = true;
-            this.loadArea(areasToLoad, true, data);
+        /**
+         * Replace payment method area.
+         */
+        resetPaymentMethod: function () {
+            $(this.getAreaId('billing_method')).update(this.paymentTemplate);
         },
 
-        loadShippingRates : function(){
+        /**
+         * Loads shipping options according to address data.
+         *
+         * @return {Boolean}
+         */
+        loadShippingRates: function () {
+            var addressContainer = this.shippingAsBilling ?
+                    'billingAddressContainer' :
+                    'shippingAddressContainer',
+                data = this.serializeData(this[addressContainer]).toObject();
+
+            data['collect_shipping_rates'] = 1;
             this.isShippingMethodReseted = false;
-            this.loadArea(['shipping_method', 'totals'], true, {collect_shipping_rates: 1});
+            this.loadArea(['shipping_method', 'totals'], true, data);
+
+            return false;
         },
 
-        setShippingMethod : function(method){
+        setShippingMethod: function(method) {
             var data = {};
+
             data['order[shipping_method]'] = method;
-            this.loadArea(['shipping_method', 'totals', 'billing_method'], true, data);
+            this.loadArea([
+                'shipping_method',
+                'totals',
+                'billing_method'
+            ], true, data);
         },
 
-        switchPaymentMethod : function(method){
+        /**
+         * Updates available payment
+         * methods list according to order data.
+         *
+         * @return boolean
+         */
+        loadPaymentMethods: function() {
+            var data = this.serializeData(this.billingAddressContainer).toObject();
+
+            this.loadArea(['billing_method','totals'], true, data);
+
+            return false;
+        },
+
+        switchPaymentMethod: function(method){
             jQuery('#edit_form')
                 .off('submitOrder')
                 .on('submitOrder', function(){
@@ -1149,9 +1247,15 @@ define([
                 || this.excludedPaymentMethods.indexOf(this.paymentMethod) == -1);
         },
 
-        serializeData : function(container){
-            var fields = $(container).select('input', 'select', 'textarea');
-            var data = Form.serializeElements(fields, true);
+        /**
+         * Serializes container form elements data.
+         *
+         * @param {String} container
+         * @return {Object}
+         */
+        serializeData: function (container) {
+            var fields = $(container).select('input', 'select', 'textarea'),
+                data = Form.serializeElements(fields, true);
 
             return $H(data);
         },
@@ -1442,6 +1546,4 @@ define([
             return this._label;
         }
     };
-
 });
-