MC-35197: Unexpected loading of the “Create New Order” page in the Magento Admin panel

Author: Viktor Sevch

app/code/Magento/GiftMessage/view/adminhtml/templates/popup.phtml

@@ -8,7 +8,7 @@
 ?>
 
 <?php if ($block->getChildHtml()):?>
-<div id="gift_options_configure_new" class="gift-options-popup product-configure-popup">
+<div id="gift_options_configure_new" class="gift-options-popup product-configure-popup no-display">
     <div id="gift_options_form_contents">
         <div class="content">
             <?= $block->getChildHtml() ?>
@@ -23,11 +23,21 @@
         </div>
     </div>
 </div>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display: none;", 'div#gift_options_configure_new') ?>
-<div id="giftoptions_tooltip_window" class="gift-options-tooltip">
-    <div id="giftoptions_tooltip_window_content">&nbsp;</div>
-</div>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display: none;", 'div#giftoptions_tooltip_window') ?>
+    <div id="giftoptions_tooltip_window" class="gift-options-tooltip">
+        <div id="giftoptions_tooltip_window_content">&nbsp;</div>
+    </div>
+    <?php $scriptString = <<<script
+    require(['jquery'], function($){
+        'use strict';
+        $('div#gift_options_configure_new').css('display', 'none');
+        $('div#gift_options_configure_new').removeClass('no-display');
+
+        $('div#giftoptions_tooltip_window').css('display', 'none');
+        $('div#giftoptions_tooltip_window').removeClass('no-display');
+    });
+script;
+    ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
     <?php $scriptString = <<<script
 require([
     "Magento_Sales/order/create/giftmessage",

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

@@ -14,25 +14,41 @@
     <div id="order-message">
         <?= $block->getChildHtml('message') ?>
     </div>
-    <div id="order-customer-selector" class="fieldset-wrapper order-customer-selector">
+    <div id="order-customer-selector" class="fieldset-wrapper order-customer-selector no-display">
         <?= $block->getChildHtml('customer.grid.container') ?>
     </div>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-        'display:' . /* @noEscape */ $block->getCustomerSelectorDisplay(),
-        'div#order-customer-selector'
-    ) ?>
-    <div id="order-store-selector" class="fieldset-wrapper">
+    <div id="order-store-selector" class="fieldset-wrapper no-display">
         <?= $block->getChildHtml('store') ?>
     </div>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-        'display:' . /* @noEscape */ $block->getStoreSelectorDisplay(),
-        'div#order-store-selector'
-    ) ?>
-    <div id="order-data">
+    <div id="order-data" class="no-display">
         <?= $block->getChildHtml('data') ?>
     </div>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-        'display:' . /* @noEscape */ $block->getDataSelectorDisplay(),
-        'div#order-data'
-    ) ?>
 </form>
+<?php $scriptString = <<<script
+require(['jquery'], function($){
+    'use strict';
+
+script;
+if ($block->getCustomerSelectorDisplay()) {
+    $scriptString .= <<<script
+    $('div#order-customer-selector').css('display', '{$block->getCustomerSelectorDisplay()}');
+    $('div#order-customer-selector').removeClass('no-display');
+script;
+}
+if ($block->getStoreSelectorDisplay()) {
+    $scriptString .= <<<script
+    $('div#order-store-selector').css('display', '{$block->getStoreSelectorDisplay()}');
+    $('div#order-store-selector').removeClass('no-display');
+script;
+}
+if ($block->getDataSelectorDisplay()) {
+    $scriptString .= <<<script
+    $('div#order-data').css('display', '{$block->getDataSelectorDisplay()}');
+    $('div#order-data').removeClass('no-display');
+script;
+}
+$scriptString .= <<<script
+});
+script;
+?>
+<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>