woocommerce order notes in order preview

I am trying to add all manual admin notes from order on order preview. I want to make it with their date & time bellow, with small text and sort by same way as backend.

Code i writed is:

//order note code
add_action( 'woocommerce_admin_order_preview_start', 'woocommerce_admin_order_preview_order_note' );
function woocommerce_admin_order_preview_order_note() {
   
      ?>
     <!-- <# if ( data.data.customer_note ) { #> -->
          <div class="wc-order-preview-order-note-container">
              <div class="wc-order-preview-custom-note">
                  <h2 class="order-note">Order Note:</h2><br>
                  {{ data.data.woocommerce_order_notes }}
              </div>
          </div>
    <!--<# } #> -->
    <?php   
}

But seems this method for data {{ data.data.field_id }} it’s not working for it. If i try global post or $order in function, preview doesnt open. Any suggestions?

Screenshot for goal:

Answer

There is no no arguments for woocommerce_admin_order_preview_end action hook. so first you have use woocommerce_admin_order_preview_get_order_details action hook where you can access $order object

For order notes you can use wc_get_order_notes function you can use check their parameter here.

// Add order notes so you can accees in `woocommerce_admin_order_preview_start`
add_filter( 'woocommerce_admin_order_preview_get_order_details', 'admin_order_preview_add_order_notes_data', 10, 2 );
function admin_order_preview_add_order_notes_data( $data, $order ) {
        
    $notes = wc_get_order_notes([
        'order_id' => $order->get_id(),
    ]);

    ob_start();

    ?>
    <div class="wc-order-preview-order-note-container" style="padding: 20px;">
        <div class="wc-order-preview-custom-note">
        <h2 class="order-note">Order Note:</h2>
            <ul class="order_notes">
                <?php
                if ( $notes ) {
                    foreach ( $notes as $note ) {
                        $css_class   = array( 'note' );
                        $css_class[] = $note->customer_note ? 'customer-note' : '';
                        $css_class[] = 'system' === $note->added_by ? 'system-note' : '';
                        $css_class   = apply_filters( 'woocommerce_order_note_class', array_filter( $css_class ), $note );
                        ?>
                        <li rel="<?php echo absint( $note->id ); ?>" class="<?php echo esc_attr( implode( ' ', $css_class ) ); ?>">
                            <div class="note_content">
                                <?php echo wpautop( wptexturize( wp_kses_post( $note->content ) ) ); // @codingStandardsIgnoreLine ?>
                            </div>
                            <p class="meta">
                                <abbr class="exact-date" title="<?php echo esc_attr( $note->date_created->date( 'Y-m-d H:i:s' ) ); ?>">
                                    <?php
                                    
                                    echo esc_html( sprintf( __( '%1$s at %2$s', 'woocommerce' ), $note->date_created->date_i18n( wc_date_format() ), $note->date_created->date_i18n( wc_time_format() ) ) );
                                    ?>
                                </abbr>
                                <?php
                                if ( 'system' !== $note->added_by ) :
                                    
                                    echo esc_html( sprintf( ' ' . __( 'by %s', 'woocommerce' ), $note->added_by ) );
                                endif;
                                ?>
                                <a href="#" class="delete_note" role="button"><?php esc_html_e( 'Delete note', 'woocommerce' ); ?></a>
                            </p>
                        </li>
                        <?php
                    }
                } else {
                    ?>
                    <li class="no-items"><?php esc_html_e( 'There are no notes yet.', 'woocommerce' ); ?></li>
                    <?php
                }
                ?>
            </ul>
        </div>
    </div>
    <?php

    $order_notes = ob_get_clean();  

    $data['order_notes'] = $order_notes;

    return $data;

}

//order notes
add_action( 'woocommerce_admin_order_preview_start', 'woocommerce_admin_order_preview_order_notes' );
function woocommerce_admin_order_preview_order_notes() {
    ?> {{{data.order_notes}}} <?php
}

Tested and works.