diff --git a/src/components/cc-invoice-list/cc-invoice-list.js b/src/components/cc-invoice-list/cc-invoice-list.js index a17ebb4fd..9672deb05 100644 --- a/src/components/cc-invoice-list/cc-invoice-list.js +++ b/src/components/cc-invoice-list/cc-invoice-list.js @@ -1,6 +1,8 @@ import { css, html, LitElement } from 'lit'; +import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js'; import { ResizeController } from '../../controllers/resize-controller.js'; import { sortBy, unique } from '../../lib/utils.js'; +import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js'; import { i18n } from '../../translations/translation.js'; import '../cc-block-section/cc-block-section.js'; import '../cc-block/cc-block.js'; @@ -11,6 +13,7 @@ import '../cc-select/cc-select.js'; import '../cc-toggle/cc-toggle.js'; const BREAKPOINTS = [520]; +const INVOICE_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/billing/unified-invoices/'; /** * @param {string} dateString @@ -75,18 +78,18 @@ export class CcInvoiceList extends LitElement { render() { if (this.state.type === 'error') { return this._renderView(html` - + `); } if (this.state.type === 'loading') { return this._renderView(html` - +
${i18n('cc-invoice-list.pending')}
- +
${i18n('cc-invoice-list.processed')}
@@ -122,7 +125,7 @@ export class CcInvoiceList extends LitElement { const hasYearSelector = filteredProcessedInvoiceTableState.invoices.length > 0 && yearChoices.length > 1; return this._renderView(html` - +
${i18n('cc-invoice-list.pending')}
${pendingInvoicesTableState.invoices.length > 0 ? html` ` @@ -134,14 +137,14 @@ export class CcInvoiceList extends LitElement { ${processingInvoicesTableState.invoices.length > 0 ? html` - +
${i18n('cc-invoice-list.processing')}
` : ''} - +
${i18n('cc-invoice-list.processed')}
${hasYearSelector ? html` @@ -178,14 +181,21 @@ export class CcInvoiceList extends LitElement { _renderView(content) { return html` -
${i18n('cc-invoice-list.title')}
+
${i18n('cc-invoice-list.title')}
${content} +
+ ${ccLink( + `${INVOICE_DOCUMENTATION}`, + html` ${i18n('cc-invoice-list.documentation.text')}`, + )} +
`; } static get styles() { return [ + linkStyles, // language=CSS css` :host { @@ -212,6 +222,12 @@ export class CcInvoiceList extends LitElement { color: var(--cc-color-text-weak); font-style: italic; } + + [slot='footer-right'] .cc-link { + align-items: center; + display: flex; + gap: 0.5em; + } `, ]; } diff --git a/src/translations/translations.en.js b/src/translations/translations.en.js index c10b47d5b..8fd17c71b 100644 --- a/src/translations/translations.en.js +++ b/src/translations/translations.en.js @@ -625,6 +625,7 @@ export const translations = { 'cc-invoice.title': `Invoice`, //#endregion //#region cc-invoice-list + 'cc-invoice-list.documentation.text': `Clever Cloud billing - Documentation`, 'cc-invoice-list.error': `An error occured while loading invoices.`, 'cc-invoice-list.pending': `Pending invoices`, 'cc-invoice-list.pending.no-invoices': `No pending invoices at the moment.`, diff --git a/src/translations/translations.fr.js b/src/translations/translations.fr.js index 998ec1dbb..6243fdb77 100644 --- a/src/translations/translations.fr.js +++ b/src/translations/translations.fr.js @@ -637,6 +637,7 @@ export const translations = { 'cc-invoice.title': `Facture`, //#endregion //#region cc-invoice-list + 'cc-invoice-list.documentation.text': `Facturation chez Clever Cloud - Documentation`, 'cc-invoice-list.error': `Une erreur est survenue pendant le chargement des factures.`, 'cc-invoice-list.pending': `Factures en attente de paiement`, 'cc-invoice-list.pending.no-invoices': `Il n'y a aucune facture en attente de paiement pour le moment.`,