ACP2E-1162: Poor user experience on checkout - update shipping price message/add some notice

Author: dyushkin

app/code/Magento/Checkout/Test/Mftf/ActionGroup/AssertStorefrontNotCalculatedValueInShippingTotalInOrderSummaryActionGroup.xml

@@ -14,7 +14,7 @@
         </annotations>
 
         <arguments>
-            <argument name="value" defaultValue="Not yet calculated" type="string"/>
+            <argument name="value" defaultValue="Selected shipping method is not available. Please select another shipping method for this order." type="string"/>
         </arguments>
         <waitForElementVisible selector="{{CheckoutOrderSummarySection.shippingTotalNotYetCalculated}}" time="30" stepKey="waitForShippingTotalToBeVisible"/>
         <see selector="{{CheckoutOrderSummarySection.shippingTotalNotYetCalculated}}" userInput="{{value}}" stepKey="assertShippingTotalIsNotYetCalculated"/>

app/code/Magento/Checkout/i18n/en_US.csv

@@ -176,6 +176,7 @@ Summary,Summary
 "We'll send your order confirmation here.","We'll send your order confirmation here."
 Payment,Payment
 "Not yet calculated","Not yet calculated"
+"Selected shipping method is not available. Please select another shipping method for this order.","Selected shipping method is not available. Please select another shipping method for this order."
 "The order was not successful!","The order was not successful!"
 "Thank you for your purchase!","Thank you for your purchase!"
 "Password", "Password"

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

@@ -373,7 +373,7 @@
                                                                 <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                                 <item name="config" xsi:type="array">
                                                                     <item name="title" xsi:type="string" translate="true">Shipping</item>
-                                                                    <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
+                                                                    <item name="notCalculatedMessage" xsi:type="string" translate="true">Selected shipping method is not available. Please select another shipping method for this order.</item>
                                                                 </item>
                                                             </item>
                                                             <item name="grand-total" xsi:type="array">

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

@@ -70,6 +70,7 @@
 
         .not-calculated {
             font-style: italic;
+            white-space: normal;
         }
 
         //
@@ -82,15 +83,7 @@
                 border-bottom: @border-width__base solid @border-color__base;
                 .lib-css(padding, @indent__s @indent__xl @indent__s 0);
                 cursor: pointer;
-                .lib-icon-font(
-                @icon-down,
-                @_icon-font-size: 30px,
-                @_icon-font-line-height: 12px,
-                @_icon-font-text-hide: true,
-                @_icon-font-margin: 3px 0 0,
-                @_icon-font-position: after,
-                @_icon-font-display: block
-                );
+                .lib-icon-font(@icon-down, @_icon-font-size: 30px, @_icon-font-line-height: 12px, @_icon-font-text-hide: true, @_icon-font-margin: 3px 0 0, @_icon-font-position: after, @_icon-font-display: block);
                 margin-bottom: 0;
                 position: relative;
 
@@ -109,10 +102,7 @@
 
             &.active {
                 > .title {
-                    .lib-icon-font-symbol(
-                    @_icon-font-content: @icon-up,
-                    @_icon-font-position: after
-                    );
+                    .lib-icon-font-symbol(@_icon-font-content: @icon-up, @_icon-font-position: after);
                 }
             }
 

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

@@ -70,6 +70,7 @@
 
         .not-calculated {
             font-style: italic;
+            white-space: normal;
         }
 
         //
@@ -82,15 +83,7 @@
                 border-bottom: @border-width__base solid @border-color__base;
                 .lib-css(padding, @indent__s @indent__xl @indent__s 0);
                 cursor: pointer;
-                .lib-icon-font(
-                @icon-down,
-                @_icon-font-size: 12px,
-                @_icon-font-line-height: 12px,
-                @_icon-font-text-hide: true,
-                @_icon-font-margin: 3px 0 0,
-                @_icon-font-position: after,
-                @_icon-font-display: block
-                );
+                .lib-icon-font(@icon-down, @_icon-font-size: 12px, @_icon-font-line-height: 12px, @_icon-font-text-hide: true, @_icon-font-margin: 3px 0 0, @_icon-font-position: after, @_icon-font-display: block);
                 margin-bottom: 0;
                 position: relative;
 
@@ -109,10 +102,7 @@
 
             &.active {
                 > .title {
-                    .lib-icon-font-symbol(
-                    @_icon-font-content: @icon-up,
-                    @_icon-font-position: after
-                    );
+                    .lib-icon-font-symbol(@_icon-font-content: @icon-up, @_icon-font-position: after);
                 }
             }