MAGETWO-96443: Backorder customer notification is not shown in Magento 2.2.0 / 2.1.9 on One page checkout #11708

Author: yelahin-serhiy

app/code/Magento/Checkout/Model/DefaultConfigProvider.php

@@ -273,10 +273,12 @@ public function __construct(
     public function getConfig()
     {
         $quoteId = $this->checkoutSession->getQuote()->getId();
+        $quoteItemData = $this->getQuoteItemData();
         $output['formKey'] = $this->formKey->getFormKey();
         $output['customerData'] = $this->getCustomerData();
         $output['quoteData'] = $this->getQuoteData();
-        $output['quoteItemData'] = $this->getQuoteItemData();
+        $output['quoteItemData'] = $quoteItemData;
+        $output['quoteMessages'] = $this->getQuoteItemsMessages($quoteItemData);
         $output['isCustomerLoggedIn'] = $this->isCustomerLoggedIn();
         $output['selectedShippingMethod'] = $this->getSelectedShippingMethod();
         $output['storeCode'] = $this->getStoreCode();
@@ -297,6 +299,7 @@ public function getConfig()
         );
         $output['postCodes'] = $this->postCodesConfig->getPostCodes();
         $output['imageData'] = $this->imageProvider->getImages($quoteId);
+
         $output['totalsData'] = $this->getTotalsData();
         $output['shippingPolicy'] = [
             'isEnabled' => $this->scopeConfig->isSetFlag(
@@ -431,6 +434,7 @@ private function getQuoteItemData()
                     $quoteItem->getProduct(),
                     'product_thumbnail_image'
                 )->getUrl();
+                $quoteItemData[$index]['message'] = $quoteItem->getMessage();
             }
         }
         return $quoteItemData;
@@ -709,4 +713,22 @@ private function getAttributeLabels(array $customAttribute, string $customAttrib
 
         return $attributeOptionLabels;
     }
+
+    /**
+     * Get notification messages for the quote items
+     *
+     * @param array $quoteItemData
+     * @return array
+     */
+    private function getQuoteItemsMessages(array $quoteItemData): array
+    {
+        $quoteItemsMessages = [];
+        if ($quoteItemData) {
+            foreach ($quoteItemData as $item) {
+                $quoteItemsMessages[$item['item_id']] = $item['message'];
+            }
+        }
+
+        return $quoteItemsMessages;
+    }
 }

app/code/Magento/Checkout/Test/Mftf/Test/StorefrontCustomerCheckoutTest.xml

@@ -77,6 +77,7 @@
         <see stepKey="s95" selector="{{OrderDetailsInformationSection.itemsOrdered}}" userInput="$$simpleproduct1.name$$" />
         <amOnPage stepKey="s96" url="{{AdminCustomerPage.url}}"/>
         <waitForPageLoad stepKey="s97"/>
+        <waitForElementVisible selector="{{AdminCustomerFiltersSection.filtersButton}}" time="30" stepKey="waitFiltersButton"/>
         <click stepKey="s98" selector="{{AdminCustomerFiltersSection.filtersButton}}"/>
         <fillField stepKey="s99" selector="{{AdminCustomerFiltersSection.emailInput}}" userInput="$$simpleuscustomer.email$$"/>
         <click stepKey="s100" selector="{{AdminCustomerFiltersSection.apply}}"/>

app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml

@@ -404,6 +404,10 @@
                                                                         <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                                         <item name="displayArea" xsi:type="string">after_details</item>
                                                                     </item>
+                                                                    <item name="message" xsi:type="array">
+                                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/message</item>
+                                                                        <item name="displayArea" xsi:type="string">item_message</item>
+                                                                    </item>
                                                                 </item>
                                                             </item>
                                                         </item>

app/code/Magento/Checkout/view/frontend/web/js/view/summary/item/details/message.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define(['uiComponent'], function (Component) {
+    'use strict';
+
+    var quoteMessages = window.checkoutConfig.quoteMessages;
+
+    return Component.extend({
+        defaults: {
+            template: 'Magento_Checkout/summary/item/details/message'
+        },
+        displayArea: 'item_message',
+        quoteMessages: quoteMessages,
+
+        /**
+         * @param {Object} item
+         * @return {null}
+         */
+        getMessage: function (item) {
+            if (this.quoteMessages[item['item_id']]) {
+                return this.quoteMessages[item['item_id']];
+            }
+
+            return null;
+        }
+    });
+});

app/code/Magento/Checkout/view/frontend/web/template/summary/item/details.html

@@ -43,3 +43,6 @@
     </div>
     <!-- /ko -->
 </div>
+<!-- ko foreach: getRegion('item_message') -->
+    <!-- ko template: getTemplate() --><!-- /ko -->
+<!-- /ko -->

app/code/Magento/Checkout/view/frontend/web/template/summary/item/details/message.html

@@ -0,0 +1,9 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="cart item message notice" if="getMessage($parents[1])">
+    <div data-bind="text: getMessage($parents[1])"></div>
+</div>

app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_order-summary.less

@@ -137,6 +137,10 @@
         }
 
         .product-item {
+            .product-item-details {
+                &:extend(.abs-add-clearfix all);
+            }
+
             .product-item-inner {
                 display: table;
                 margin: 0 0 @indent__s;
@@ -166,6 +170,10 @@
                     }
                 }
             }
+
+            .message {
+                margin-top: 10px;
+            }
         }
 
         .actions-toolbar {