How to add simple text message in checkout page new address form? magento 2

Question

Hi I have been trying to add simple text message in the highlighted section of attached screenshot . I am currently adding the custom text message in

I overrided below file from \vendor\magento\module-checkout\view\frontend\layout\checkout_index_index.xml

\app\design\frontend\Company\porto_base_child\Magento_Checkout\layout\checkout_index_index.xml

<item name="popUpForm" xsi:type="array">
    <item name="element" xsi:type="string">#opc-new-shipping-address</item>
    <item name="options" xsi:type="array">
        <item name="type" xsi:type="string">popup</item>
        <item name="responsive" xsi:type="boolean">true</item>
        <item name="innerScroll" xsi:type="boolean">true</item>
        <item name="title" xsi:type="string" translate="true">Shipping Address</item>
        <item name="trigger" xsi:type="string">opc-new-shipping-address</item>
        <item name="notice" xsi:type="string" translate="true">Some note here</item>
        <item name="additionalInfo" xsi:type="string">
            <![CDATA[<b>My Html Information</b>]]>
        </item>
        <item name="text" xsi:type="string" translate="true">Some note here</item>
        <item name="buttons" xsi:type="array">
            <item name="save" xsi:type="array">
                <item name="text" xsi:type="string" translate="true">Save Address</item>
                <item name="class" xsi:type="string">action primary action-save-address</item>
            </item>
            <item name="cancel" xsi:type="array">
                <item name="text" xsi:type="string" translate="true">Cancel</item>
                <item name="class" xsi:type="string">action secondary action-hide-popup</item>
            </item>
        </item>
    </item>
</item>

I am not getting any error's or warning but the below code in above file did not work. Can anyone please guide me through this it would definitely help me continue my learning of magento 2 concepts and get clear understanding how it works? thanks

<item name="notice" xsi:type="string" translate="true">Some note here</item>
            <item name="additionalInfo" xsi:type="string">
                <![CDATA[<b>My Html Information</b>]]>
            </item>
            <item name="text" xsi:type="string" translate="true">Some note here</item>

Answer 1

The position where you add the html text is a modal footer position. You can not add text here as simple. Because this is create by modal widget. You can easily add html text above this position and under the 'Save in address book' checkbox by this below process.

1. Overwrite the file /vendor/magento/module-checkout/view/frontend/web/template/shipping-address/form.html and add 'Your content will be in here' as below.

<div id="shipping-new-address-form" class="fieldset address">
        <!-- ko foreach: getRegion('additional-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <!-- ko if: (isCustomerLoggedIn) -->
        <div class="field choice" data-bind="visible: !isFormInline">
            <input type="checkbox" class="checkbox" id="shipping-save-in-address-book" data-bind="checked: saveInAddressBook" />
            <label class="label" for="shipping-save-in-address-book">
                <span data-bind="i18n: 'Save in address book'"></span>
            </label>
        </div>
        <!-- /ko -->

        <!---- Your content will be in here------>

    </div>

2. Or if you need to add in modal footer Then you need to do this.

a. Overrite this file /vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

Search line number 173. and change the code ass below

From :

this.popUpForm.options.opened = function () {
                    // Store temporary address for revert action in case when user click cancel action
                    self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
                };

To:

this.popUpForm.options.opened = function () {
                    // Store temporary address for revert action in case when user click cancel action
                    self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
                    $(".modal-footer .action:first").before( 'Your content will be in here' );
                };