JS code in template not respected when switch to invoice preview

[DrDBanner]

Setup

• Version: API: 5.9.1
• Environment: ZIP

Interface

• Flutter: []
• React: [x]
• Both: []

Checklist

• Can you replicate the issue on our v5 demo site https://demo.invoiceninja.com or https://react.invoicing.co/demo?
  Didn't try.

• Have you searched existing issues?
  yes

• Have you reported this to Slack/forum before posting?
  yes

• Have you inspected the logs in storage/logs/laravel.log for any errors?
  no

Describe the bug

I have added some JS code to a custom invoice template. Within the designer this code is respected with the PDF renderer and the HTML view option. No problem. If I save and switch over to invoices and open an invoice and look at the generated PDF preview the code is ignored.

Steps To Reproduce

1. Add delivery address to invoice/client
2. Enable delivery address in settings
3. put this code into footer-code within a custom template

<script>
    // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
    document.addEventListener('DOMContentLoaded', () => {
        let tables = [
            'product-table', 'task-table', 'delivery-note-table',
            'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
            'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table',
            'client-details', 'vendor-details', 'swiss-qr', 'shipping-details', 'statement-credit-table', 'statement-credit-table-totals',
        ];
        tables.forEach((tableIdentifier) => {
            console.log(document.getElementById(tableIdentifier));

            document.getElementById(tableIdentifier)?.childElementCount === 0
                ? document.getElementById(tableIdentifier).style.setProperty('display', 'none', 'important')
                : '';
        });

        const targetElement = document.querySelector('[data-ref="client_details-shipping-client.shipping_address1"]');

        if (targetElement) {
            const container = document.getElementById('shipping-details');
            const siblings = Array.from(container.children);
            if (targetElement.textContent && targetElement.textContent.trim()) {
                siblings.forEach(sibling => {
                    sibling.style.setProperty('color', 'green', 'important');
                });
            } else {
                siblings.forEach(sibling => {
                    sibling.style.setProperty('color', 'red', 'important');
                });
            }
        } else {
            console.log('Bogus.');
        }
    });
</script>

4. See within the designer preview how the delivery address gets formatted. Save.
5. Create a new invoice and see how the code is ignored within the invoice preview.

Expected Behavior

Execute the code identical to the designer preview.

Additional context

none

[turbo124]

This related to the DOM availabilty of that element when in the printing phase. I think you'll find the element is not yet visible when previewing this.

I would suggest adding LOG_PDF_HTML=true in your .env file this will dump the .html into your logs, then view this .html locally and you'll see Bogus appear in the console.

then add this