fix(cc-invoice): <template> content is erased

[florian-sanders-cc]

Fixes #784

What does this PR do?

Move the <template> tag used within cc-invoice inside the unsafeHTML expression because Lit won't allow using expressions inside a <template> tag.

What to review?

• code
• UI (in prod, invoice content = blank, in preview, invoice content = heading and text).

More info about the issue and the solution

The <cc-invoice> component allows developers to pass HTML through the invoice.invoiceHtml prop.
This feature used to work with Lit 1.X but it has been broken since we've migrated to Lit 2.X (components version 10 and upper).

The HTML fragment is supposed to be handled by <cc-html-frame> inside the <cc-invoice> component.

To pass HTML to <cc-html-frame>, you need to slot it inside a <template> tag like this:

<cc-html-frame>
  <template>your html</template>
</cc-html-frame>

In <cc-invoice> we used to do it like this:

<cc-html-frame>
  <template>${unsafeHTML(this.invoice.invoiceHtml)}</template>
</cc-html-frame>

But it does not work anymore because you cannot use expressions within a <template> tag (see Lit docs - Invalid locations).
Trying to use unsafeHTML expression within a <template> tag on Lit playground results in the following error:

[github-actions]

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cc-invoice/fix-html-preview/index.html.

This preview will be deleted once this PR is closed.

[roberttran-cc]

Thank you very much for the explanations!

[pdesoyres-cc]

Nice catch! Thank you for the explanations.

[hsablonniere]

👏 Wow, nice catch, I learnt something today!

[github-actions]

🔎 The preview has been automatically deleted.